0

I have to render React component on multiple places across the page. So I have two divs with same ids and I want to render same React component on both places:

<h1>Title 1</h1>
<div id='react-component'>/<div>
.
.
.

<h1>Title 2</h1>
<div id='react-component'>/<div>

In React it renders component nly on one place:

const node = document.querySelector('#react-component');
if (!node) {
  return null;
}
ReactDOM.render(<Component />, node);

What would be the most efficient way to solve this? Is it possible for ReactDOM to render same component on multiple nodes?

Klark
  • 423
  • 6
  • 16

1 Answers1

0

Probably shouldn't use two same IDs. But you can do the same with classes !

Then you simply have to get them using

document.querySelectorAll('.yourclass') (Since querySelector only gives you the first instance of the found item)

Guillaume Richard
  • 196
  • 7