How would I render to two different grids in reactjs?

Question

I want to render to colLeft and ColRight from the same ReactJs class. So that one component goes to the left and one to the right.

<div class="container">

  <div class="row">
    <div id="colLeft" class="col s6"></div>
    <div id="colRight" class="col s6"></div>
  </div>
</div>

ReactJs class contains two components. One would be in the left and one in the right column.

<Card className='large'/>
<Card className='large'/>

Do I create a portal? What if I had more than two columns, say like 15?

Answer 1

I guess the answer is just to call ReactDOM.render two times inside the Javascript file.

ReactDOM.render(<TestCard/>, document.getElementById("colLeft"));
ReactDOM.render(<LeftTestCard/>, document.getElementById("colRight"));