CODEWITHSUNDEEP
javascripthtmlreactjsfrontend
ewrwerwe
ewrwerwe

Reputation: 55

React: How to render a component twice in an HTML page?

I have a component 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 component to render twice in this page, but it only renders once for the second div. Is there anyway to render it twice?

Upvotes: 4

Views: 2797

Answers (4)

Tharaka Wijebandara
Tharaka Wijebandara

Reputation: 8065

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')
    );

Upvotes: 4

Dan Mason
Dan Mason

Reputation: 2327

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
));

Upvotes: 2

abdul
abdul

Reputation: 1581

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')
);

Upvotes: 2

Mark Rabey
Mark Rabey

Reputation: 1415

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 component to each div:

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

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

Upvotes: 3

Related Questions