Estoy tratando de llamar a nextPage() en getConfirm cuando alguien hace clic en el botón "Confirmar", pero dice que numPlay nunca se define en el método getConfirm().
¡Por favor, que alguien me ayude a entender por qué/arreglarlo! Gracias
const root = ReactDOM.createRoot(document.getElementById('root')); const title = <h1 style={{ fontSize: "40px" }}> Draft </h1> const numPlayers = ( <div id="numPlayers"> {title} <h1 style={{ fontSize: "20px" }}> How many players would you like to draft with? </h1> <input id="numPlay" placeholder="Number of players" type="number"></input> <div> </div> <button id="confirm" onClick={getConfirm}> Confirm </button> </div> ); function getConfirm() { var numPlay = document.getElementById("numPlay"); root.render(nextPage); } const nextPage = ( <div> {title} <h1 style={{ fontSize: "20px" }}> How many draftees are there? {numPlay} </h1> </div> ) root.render(numPlayers);Debe declarar numPlay fuera de getCOnfirm :
import React from 'react'; import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); const title = <h1 style={{ fontSize: '40px' }}>Draft</h1>; let numPlay; const numPlayers = ( <div id="numPlayers"> {title} <h1 style={{ fontSize: '20px' }}> How many players would you like to draft with? </h1> <input id="numPlay" placeholder="Number of players" type="number"></input> <div></div> <button id="confirm" onClick={getConfirm}> Confirm </button> </div> ); function getConfirm() { numPlay = document.getElementById('numPlay'); root.render(nextPage); } const nextPage = ( <div> {title} <h1 style={{ fontSize: '20px' }}> How many draftees are there? {numPlay} </h1> </div> ); root.render(numPlayers); Pero, ¿por qué está utilizando React llamando a .render de manera imperativa? ¿Está tratando de integrar algunos componentes de React en un SPA ya existente?