CODEWITHSUNDEEP
javascriptnode.jsreactjsdomcomponents
Isaac Martinez Jr. Mora
Isaac Martinez Jr. Mora

Reputation: 69

React component no reacting when a div tag is added below it

I have two components that I want to add to a webpage. The first component works fine when is the only component in index.html, but when I add the div with id="disp" the components stop responding. I have not idea of why is this behavior.

Here is how my index.html looks like:

  <body>
  <div id="input"></div>
  <script type="text/JavaScript" src="./index.js"></script>

  <div id="disp"></div>
  <script type="text/JavaScript" src="./index.js"></script>

  </body>

And my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Input from './components/input';
import Display from './components/display';

ReactDOM.render(
  <React.StrictMode>
  <Input />
  </React.StrictMode>,
  document.getElementById('input')
);

ReactDOM.render(
  <React.StrictMode>
  <Display />
  </React.StrictMode>,
  document.getElementById('disp')
);

Upvotes: 1

Views: 509

Answers (1)

Joey
Joey

Reputation: 510

You can only have one root element at React. You can handle it like this:

ReactDOM.render(
  <React.StrictMode>
  <>
    <Input />
    <Display />
  </>
  </React.StrictMode>,
  document.getElementById('root')
);

And:

<body>
<div id="root">
  <div id="input"></div>
  <div id="disp"></div>
</div>
  <script type="text/JavaScript" src="./index.js"></script>
</body>

Basically, I wrapped those two elements using a div with root id.

Upvotes: 2

Related Questions