Hola, estoy tratando de representar condicionalmente uno de los tres aspectos de un juego de una página y estoy atascado en uno de los primeros obstáculos.
import React, { useState } from "react"; function App() { const [currentPage, setCurrentPage] = useState("Intro"); if (currentPage === "Intro") { return ( <div className="App"> <Intro setCurrentPage={setCurrentPage} /> </div> ); } if (currentPage === "GameContainer") { return ( <div> <GameContainer setCurrentPage={setCurrentPage} /> </div> ); } if (currentPage === "EndGame") { return ( <div> <EndGame setCurrentPage={setCurrentPage} /> </div> ); } } export default App;Esto hace que el componente esté bien, pero hay un botón que he conectado a una función de clic en el componente de introducción que espero cambie el estado y, por lo tanto, el renderizado.
import React from "react"; function Intro(setCurrentPage) { function startGame() { setCurrentPage("GameContainer"); } return ( <div className="intro"> <div class="hoverButton"> <button class="startButton" onClick={startGame} alt="start game"> Start Game! </button> </div> <p id="footNote">written using react.js</p> </div> ); } export default Intro;Recibo el error "setCurrentPage no es una función".
Sé que los recursos están disponibles, pero simplemente no puedo entender cómo lograr lo que busco o entender dónde me estoy equivocando.
Cualquier consejo apreciado, gracias
Está desestructurando incorrectamente la propiedad setCurrentPage en Intro . Debe agregar llaves al desestructurar el accesorio directamente, en su caso, {setCurrentPage} .
Intenta actualizarlo como:
import React from "react"; function Intro({setCurrentPage}) { function startGame() { setCurrentPage("GameContainer"); } return ( <div className="intro"> <div class="hoverButton"> <button class="startButton" onClick={startGame} alt="start game"> Start Game! </button> </div> <p id="footNote">written using react.js</p> </div> ); } export default Intro;