Why component rendered with ReactDOM.render loses react-redux context (Provider)

Question

For example my application consists from 2 parts and is wrapped in Provider:

<>
  <Provider store={store}>
     <ModalWindow />
     <Main />
  </Provider>
</>

I render different content in ModalWindow, for this I have config file:

export const modalConfig = {
  firstConfig: {
    onRender: (node, props) => {
      ReactDOM.render(<FirstComponent {...props} />, node)
    },
  },
  secondConfig: {
    onRender: (node, props) => {
      ReactDOM.render(<SecondComponent {...props} />, node)
    },
  },
 }

My Main component has always react-redux context and I can use useSelector or useDispatch

But why components which I render with ReactDOM.render() don't have react-redux context? I need to wrap them additional to solve this, like this:

export const modalConfig = {
  firstConfig: {
    onRender: (node, props) => {
      ReactDOM.render(<Provider store={store}><FirstComponent {...props} /></Provider>, node)
    },
  },
  secondConfig: {
    onRender: (node, props) => {
      ReactDOM.render(<Provider store={store}><SecondComponent {...props} /></Provider>, node)
    },
  },
}

Why it happens?

Could you show the content component content? – Cássio Lacerda Apr 22 '21 at 22:21 — Cássio Lacerda, Apr 22 '21 at 22:21

score 0 · Answer 1 · answered Apr 23 '21 at 02:31

You are using ReactDOM.render to insert the modals into the document, so they wind up outside of the Provider component, which is rendered inside your root node (probably document.getElementById("root")).

I'm not sure why you need ReactDOM.render here. You could probably redesign this so that ModalWindow just conditionally returns some content. You can use CSS styling to make it into an overlay. You can also look into the React Portal API.

Why component rendered with ReactDOM.render loses react-redux context (Provider)

1 Answers1

Linked