How to pass data between 2 DOM (ReactJs)

Question

In a project, I have to use multiple react rendering elements.

index.js

    ReactDOM.render(
        <Header/>,
        document.getElementsByClassName('globalHeader') [0]
    );

    ReactDOM.render(
        (
            <Provider store={store}>
                <PersistGate persistor={persistor}>
                    <ConnectedRouter history={history}>
                        <AppRouter/>
                    </ConnectedRouter>
                </PersistGate>
            </Provider>
        ),
        document.getElementById('root') as HTMLElement
    );

How can I have a single data storage between these elements? The redux data in 1 component should be accessible in other component.

I have an answer to a similar question, hope this helps, [StackOverflow: Correct way to share functions between components in React](https://stackoverflow.com/a/51661103/2430549) — HoldOffHunger, Jun 03 '20 at 19:33

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

Dude. you need not use 2 DOMs for achieving global header

Just change your render method in AppRouter to look something like this

<>
  <Header />
  <Switch>
    <Route
      exact
      path="/somepath1"
      component={Component1}/>
    <Route
      exact
      path="/somepath1"
      component={Component2}/>
  </Switch>
</>

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 04 '20 at 05:00

p2pdops

505
4
11

How to pass data between 2 DOM (ReactJs)

1 Answers1