How to share a specific variable between different react components

Question

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

A G · Accepted Answer · 2022-05-09 20:09:31Z

2

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.

answered May 9, 2022 at 20:09

A G

22.9k12 gold badges94 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sergey Tyupaev · Accepted Answer · 2022-05-09 20:05:10Z

0

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

answered May 9, 2022 at 20:05

Sergey Tyupaev

1,27310 silver badges24 bronze badges

Comments

Fahad Nadeem · Accepted Answer · 2022-05-09 20:23:53Z

0

Ways to share data between states:

The parent component.
Localstorage
Global State management

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:

Generate key in parent and share it in both components
Create a state in parent component in parent and then set that state in history

answered May 9, 2022 at 20:23

Fahad Nadeem

772 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to share a specific variable between different react components

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related