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>
);
Source: stackoverflow.com
Related Query
- How can I store icons into my local storage?
- How to store into the local storage ? (REACT)
- Instead of storing values to local storage want to store values in Redux how can i Do?
- How do set JWT to be store in local storage so all parts of my domain can access it?
- How to persist only a subset of redux store into the local storage in redux-persist
- How to store a Form element File into local storage
- How can I get data from a local file into my React app?
- How can i use React's fetch to store data into a variable?
- How to store multiple set of data in local storage in reactjs?
- How can I use local Storage with the login functionality in react
- How can I store a 2-dimensional array into cookies?
- How can I import local Bootstrap CSS into a React app without overriding my CSS files?
- How to store a react state into local storage?
- How can I store the data I get from a Promise back into an object with the same key it came from?
- How I can add Local Storage to my React.js app?
- How can i get the values of multi dynamic check boxes and store into a reactjs state
- (reactjs) how to set a promise or set the current state into local storage
- how can i store font family into an array and use it in select options in react.js
- How to store specific API data in local storage and show those data to another page in ReactJs?
- how i can render directly my menu when my local storage is not null?
- How to store files in local storage
- How to prevent react-persist store the data to local storage for some cases?
- How can I access the local storage on page reload in redux store?
- How i can set state from get local storage i react?
- How can I store cookies on a local client that are returned from a local backend API?
- React : How can I store my text file's content into a variable using async->fetch
- How can I parse through local JSON file in React js?
- How to inject mobx store into a stateless component
- How can I insert into React's state array with setState?
- How to pass store explicitly into as a prop to "Connect()"
More Query from same tag
- Reloading page in reactJS
- ReactJS - Issue about routing components
- How to give the rest of letters default color
- How to set maxLength in CkEditor 5 in react js?
- SVG in Chart does not Re-render after props Change. React + d3
- What will be the correct type of "any"?
- React Hooks - having trouble with splice updating state during onClick event
- React - update state only for the clicked element
- Setting custom directory for server files for Next.js
- Unable to add array to firebase-firestore in reactjs?
- How to update state in map function in reactjs
- Bootstrap stopped working with React
- How to create an asynchronous function to request data in reactjs?
- React Hooks "I am trying to use react hooks with checkbox toggle but its updating all checkboxes " using rendition
- When add new row of 2nd column , 1st row is row span in react.js
- React TypeScript: Correct ref type for HTML Select with an OnChange with useRef
- Can't find `ref` using findDOMNode() after componentDidMount() in this simple example
- Google Drive video url is not working for larger files in react player in react js
- Cannot read properties of null (reading 'video')
- reactjs handle click outside an element error
- Why does react refuse to convert jsx to HTML component and just returns [object Object]?
- Dropdown Value not passing from one component to the other - React JS
- How do I include react elements dynamically?
- DateTimePicker Redux Form Field Problems
- Cannot install redux through npm?
- How to show data value on top of bar in react-chartjs-2?
- operation on react state
- Specify a React Component as defaultProp of another component
- How can I expand the row only when that row was clicked?
- ReactJS - I can't pass prop trought Route for a child component