I have a react element testReactElement and want to display it on the screen and even after the user closes the tab and opens it again, they should find the same data still displayed, so I put it on the localStorage, and to add a react element to localStorage I first should stringify it using JSON.stringify() , and It gets successfully stored in localstorage, when I want to retrieve it from the local storage and display it It, I use JSON.parse().
import './App.css';
let testReactElement = <div>
<h1>this is the title of the react element</h1>
<p>This is the content of the react element</p>
</div>
localStorage.setItem('element',JSON.stringify(testReactElement))
function App() {
return (
<div className="App">
{JSON.parse(localStorage.getItem('element'))}
</div>
);
}
export default App;
The problem is that JSON.parse() returns a javascript object the looks similar to but not the same as the react element I initially added to localStorage, and the newly returned object is missing some keys, so react doesn't recognize it as a react element, and throws the following error Error: Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
When I tried to compare the original react element to the stringified one , I found that after the stringification, the react element is missing the '$$typeof' symbol key and is what causes react not to recognize it as a react element and only see it as a regular JS object, therefore throwing an error . After some googling, I found that this happens because when we try JSON.stringify(symbol) it returns undefined.
So how can I put a react element in localstorage and then retrieve it back as I initially entered it so I can display it on the screen?
You should make use of useEffect when you try to get the items from local storage and not do it in jsx.
Live Demo
import { useEffect, useState } from "react";
import "./styles.css";
let testReactElement = "this is the title of the react element";
function App() {
const [data, setData] = useState(testReactElement);
useEffect(() => {
const data = localStorage.getItem("data");
if (data) {
setData(JSON.parse(data));
}
}, []);
useEffect(() => {
localStorage.setItem("data", JSON.stringify(data));
});
return <div>{data}</div>;
}
export default App;