Tengo dos componentes que quiero agregar a una página web. El primer componente funciona bien cuando es el único componente en index.html, pero cuando agrego el div con id="disp" los componentes dejan de responder. No tengo idea de por qué es este comportamiento.
Así es como se ve mi index.html:
<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>Y mi 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') );Solo puede tener un elemento raíz en React. Puedes manejarlo así:
ReactDOM.render( <React.StrictMode> <> <Input /> <Display /> </> </React.StrictMode>, document.getElementById('root') );Y:
<body> <div id="root"> <div id="input"></div> <div id="disp"></div> </div> <script type="text/JavaScript" src="./index.js"></script> </body>Básicamente, envolví esos dos elementos usando un div con ID de raíz.