I have 2 sibling components home and history where home has the following function
//home
function handledata() {
const key = uuidv4();
localStorage.setItem(key, JSON.stringify(formdata));
}
I need to access local storage in the sibling history component so how do i access this key variable there
//history
const [items, setItems] = React.useState([]);
const handledata = () => {
localStorage.getItem(key);
};
Complete code of both files https://github.com/Megahedron69/testrep
You're best option is to decouple localstorage from both the components & make a it a separate module or a class. Then you can access it in both the files.
Pseudocode
class LocalStorage {
setItem(key, item) { ... }
getItem(key) { ... }
}
If you don't want to do that - Lifting the state up is the best possible solution when want to share data between sibling components.
Make a parent component of home & history & use localstorage there.
You don't need handledata function in that case.
You can just access localStorage without it:
const data = localStorage.getItem(key);
// use this data any way you want in the component
Ways to share data between states:
Local storage is not recommended for this stuff and in your case global state doesn't make sense. Parent state is better in your case.
There are multiple things you can do: