Error if the state has objects in the properties

[krajasekhar]

My state object looks like this.

this.state = { pgNum: 0, mainPage: <Home />, addVal: 0 };

This line added in the render() block
<SimpleStorage parent={this}/>
Such case I am getting the below error in the console.

Uncaught Error: Objects are not valid as a React child (found: object with keys {key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
in div (created by App)
in App
in div
at invariant (invariant.js:42)
at throwOnInvalidObjectType (react-dom.development.js:11899)
at updateSlot (react-dom.development.js:12168)
at reconcileChildrenArray (react-dom.development.js:12299)
at reconcileChildFibers (react-dom.development.js:12656)
at reconcileChildrenAtExpirationTime (react-dom.development.js:13024)
at reconcileChildren (react-dom.development.js:13007)
at updateHostComponent (react-dom.development.js:13341)
at beginWork (react-dom.development.js:13829)
at performUnitOfWork (react-dom.development.js:15864)

[ryanjyost]

Looks like you are trying to save a component in your React state, which then gets saved as a string in localStorage (because all values in localStorage are strings) and then comes out as an object.

Saving a component in state is definitely not something you want to do and will break this component.

Learn more at the below issue.

reduxjs/redux#1248

[krajasekhar]

Understood. Will change my logic to save the name of the component in the state instead of the component itself. I will render corresponding component with the name fetched from the state.
Thanks