score:3

you can't store a react component in local storage as that would require "stringifying" the instance of component which will only ever give you [object] [object].

what you need to do is store some string key or some codified representation of the icon which you can store. upon retrieval you can render the relevant icon.

you need to change the object to store the icon name / id / some representation of which icon is being selected.

{
  id: 0,
  iconid: 'shoppingcarticon1',
  label: 'groceries',
  content: ['grocery list', 'test']
}

given you are using @material-ui/icons you can use the icon names as they key. you will need to change it so that when a user selects an icon you store the icon name.

handleaddicon = (icon) => {
    let iconname = icon.name; // get the icon name / id here
    // console.log(json.stringify(iconvalue))
    let activetab = this.state.activetab;
    let tabs = [...this.state.tabs];
    tabs[activetab].iconname = iconname; // change this to rely on the icon name
    // ...rest

  }

when you render the icon, instead of directly relying on the icon to be in the state you can render the icon depending on which name was selected.

// on option is just to check for each icon

  tabs.map((tab) => (
    <tab>
      {tab.iconname === "shoppingcart" && <shoppingcarticon />}
      {tab.iconname === "alarm" && <alarmicon />}
      // ...so on
    </tab>
  );

if there are too many icon options you could create a map between the icon name and the component so something like:

// on option is just to check for each icon
const nametoiconmap = {
  shoppingcart: <shoppingcarticon />,
  alarm: <alarmicon />,
  // soo on
}

  tabs.map((tab) => (
    <tab>
      // reference the name inside the render like so
      {nametoiconmap[tab.iconname]}
    </tab>
  );

Related Query

More Query from same tag