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