Rendering into multiple placeholder divs instead of a single root

Most examples assume that all of your html markup will live in either the root component or one of its children like this.

   ReactDOM.render(
      <Provider store={store}>
        <MyRootComponent />
      </Provider>,
     rootEl
   )

I’m working on a project where we are parsing an html page and looking for a custom html tag for example

   <Component type="checkBox" id="blah" otherProp="someValue"> </Component>

If we find this tag we render a react component where this tag used to be. There can be many of these tags on an html page. This worked before no problem since we could just call render once per tag and it would replace it. Just to be clear, the entire page is NOT a react app we only render react components into these special placeholder tags and the rest of the page is just regular html.

Is it possible to do the same with react-redux? All the examples I have seen contain a single render at the highest level that has the provider as a wrapper. How could I accomplish multiple renders into specific placeholder tags but still benefit from a redux global store? I’ve looked into dangerouslySetInnerHtml but it seems to be frowned upon for security reasons. It also doesn’t really accomplish what I want since it ends up rendering these placeholder tags directly into the html when what I really want to do is replace each one of these tags with a react component render. I’ve been stuck on this for awhile so any and all help would really be appreciated. Thank you.

[anatoliyarkhipov]

Provider is very simple. It just passes the given store to the context. So you can have multiple providers on a page. Just give them the same instance of store.

const store = createStore(/* ... */)

// ...

ReactDOM.render(
    <Provider store={store}>
        <CheckBox />
    </Provider>,
    checkBoxTargetNode
)

ReactDOM.render(
    <Provider store={store}>
        <TextBox />
    </Provider>,
    textBoxTargetNode
)

[ghost]

@jimbolla thanks thats what it was. I created a variable for the store and now it works.

just in case someone one sees this and it’s going through the same thing.

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import ReduxPromise from 'redux-promise';
import App from './components/app';
import SideImageComp from './components/SideImage/SideImageComp';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);


// This is what I added
let newstore = createStoreWithMiddleware(reducers);

ReactDOM.render(
  <Provider store={newstore}>
  <App/>
</Provider>, document.querySelector('.Approot'));


ReactDOM.render(
  <Provider store={newstore}>
  <SideImageComp/>
</Provider>, document.querySelector('.sideImage'));