How can i share data between non-related components in react js?

Question

I'm quite new with reactjs, and I'm struggling with the following: I have a Header component (in my App.js file) which contains an AudioPlayer. This AudioPlayer needs to be updated with current value of src (with the path of the song, stored in local) and title. Now, think about something like this:

App.js

function App(){
    <Header/>
    <Page1/>
    <Page2/>
    <Page3/>
    ...
    <SomePage/>
    ...
    <Footer/>
}

Header.js

import HeaderLogic from './HeaderLogic'

funtion Header(){

    const {property1, property2, ..., path, title} = HeaderLogic()
    //In HeaderLogic I want to get path and title, set in SomePageLogic.js
    ...
    return <>
        <AudioPlayer
            src={path}
            title={title}
        />
        ...
    </>
}

SomePage.js

import SomePageLogic from './SomePageLogic'
import songPath from './somePath/songPath'

function SomePage(){
    const title = 'songTitle'
    const {property1, property2, ..., propertyN} = SomePageLogic(songPath, title)
    //In SomePageLogic (or maybe here) I want to set path and title of the song,
    //in order to be used from the HeaderLogic component

    return <>
        ...
    </> 
}

I'm not sure useContext could be fine in this case, since I want to share data between unrelated components... Of course, the Header should rerender when it detects the song has been set. Should I use some kind of subscription pattern? Any hint?

Thank you very much!

Does this answer your question? [Sharing data between React components](https://stackoverflow.com/questions/62981952/sharing-data-between-react-components) — Yousaf, Mar 27 '21 at 11:59

score 1 · Answer 1 · answered Mar 27 '21 at 12:02

you can use Redux for storing your states. Basically React Redux is kind of a store where you can store your state and whenever it get updated it directly render html. you can access store state anywhere by using useSelector in hook, it get updated value whenever it changed by some other component

score 1 · Accepted Answer · answered Mar 27 '21 at 12:04

No need for any subscription pattern and definitely not using localStorage - context is exactly used for your usecase: sharing state between unrelated components.

So for instance, I want to share selected menu between the header and the Page1 somewhere below, you'd create a context with createContext(), export it's provider, wrap the children, and then you share that state between all components you set as children. Example:

const defaultSelectedMenu = 'a';
export const MenuContext = createContext({ selectedMenu: defaultSelectedMenu });
export const MenuProvider = ({ children }) => {
  const [selectedMenu, setSelectedMenu] = useState(defaultSelectedMenu);
  return (<MenuContext.Provider value={selectedMenu, setSelectedMenu}>
      {children}</MenuContext.Provider>)
}

And then in your app.js:

...
<MenuProvider>
  <Header />
  <Page1 />
</MenuProvider>
<Page2 />
...

Now, your Header and Page1 components can access the MenuContext through useContext(MenuContext) and have access to the state and the mutator.

This was just a simple example but the same logic applies to any logic you want to share, heavy computation, API calls, you name it. You define the implementation in the <Provider> and then consume the implementation by accessing it through useContext

Thanks for the answer! I'm almost there but still there is something is missing: when Page1 provides values for the context, the Header cannot receive them because they are not still available (Header component renders before then Page1). How can I manage this behaviour, in your opinion? — Apokalos, Mar 27 '21 at 14:42

score 0 · Answer 3 · answered Mar 27 '21 at 11:53

0

You can use localStorage.

Basically, it'll store your desired value in the browser. So, you can access it from anywhere within the application.

answered Mar 27 '21 at 11:53

Zunayed Shahriar

2,557
2
12
15

How can i share data between non-related components in react js?

3 Answers3