I have a ponent built using React:

myComponent.js

    ReactDOM.render(
      <MyComponent />,
      document.getElementById('my-id')
    );

In my HTML, I want to render it twice. My HTML is as following:

    <div id='my-id'></div>
    some html
    <div id='my-id'></div>

I want my React ponent to render twice in this page, but it only renders once for the second div. Is there anyway to render it twice?

I have a ponent built using React:

myComponent.js

    ReactDOM.render(
      <MyComponent />,
      document.getElementById('my-id')
    );

In my HTML, I want to render it twice. My HTML is as following:

    <div id='my-id'></div>
    some html
    <div id='my-id'></div>

I want my React ponent to render twice in this page, but it only renders once for the second div. Is there anyway to render it twice?

• javascript
• html
• reactjs
• frontend

4 Answers 4

You can't have the same id for two or more elements in HTML. Use different ids

    <div id='my-id-one'></div>
    some html
    <div id='my-id-two'></div>

and call the ReactDOM.render separately for each id.

    ReactDOM.render(
      <MyComponent />,
      document.getElementById('my-id-one')
    );
    
    ReactDOM.render(
      <MyComponent />,
      document.getElementById('my-id-two')
    );

It looks like you want to render it in 2 different places, with non-React code in between. To do that, you'll want to give your divs different IDs:

<div id='my-id></div>
some html
<div id='my-other-id></div>

Then render the ponent to each div:

ReactDOM.render(
    <MyComponent />,
    document.getElementById('my-id')
);

ReactDOM.render(
    <MyComponent />,
    document.getElementById('my-other-id')
);

You could do

ReactDOM.render(
     <div>
       <MyComponent />
       <MyComponent />
     </div>, document.getElementById('my-id') );

Or You could also have two div tags with different id

<div id='one'></div>
some html
<div id='two'></div>

then

ReactDOM.render(
  <MyComponent />,
  document.getElementById('one')
);

ReactDOM.render(
  <MyComponent />,
  document.getElementById('two')
);

Another option is to use a class to define elements to render in:

<div id="my-id-one" class="render-here"></div>
some html
<div id="my-id-two" class="render-here"></div>

Then in js:

let elements = document.getElementsByClassName('render-here');
elements.map(element => ReactDOM.render(
  <MyComponent />,
  element
));