Estoy creando una aplicación de prueba que obtiene las preguntas y respuestas de una API, se compone de la página de inicio y otra página para mostrar las preguntas y respuestas, previamente configuré un start de estado para cambiar entre los valores booleanos para saber cuándo renderizar las preguntas, pero mi conjunto de request asignadas no se muestra en la página con el componente Question . El código de la aplicación, así como la pregunta, se encuentran a continuación, quiero que al hacer clic en el botón, se represente la pregunta asignada.
const [start, setStart] = React.useState(true) console.log(start) function renderNextPage() { setStart(false) } const [request, setRequest] = React.useState([]) React.useEffect(() => { fetch('https://opentdb.com/api.php?amount=5') .then(res => res.json()) .then(data => setRequest(data.results.map(({ question, correct_answer, incorrect_answers }) => ({ question, correct_answer, incorrect_answers })))) }, []) const questionElements = request.map(req => { return ( < Question question = { req.question } /> ) }) return ( start ? < Start handleClick = { renderNextPage } /> : {questionElements} ) } // QUestion Component export default function Question(props) { return ( <div > <h1 > { props.question } working </h1> < /div> ) } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>Esto podría suceder porque los elementos de su pregunta no están envueltos en un componente principal. Por lo tanto, es posible que desee utilizar sus elementos de pregunta como este:
<div>{questionElements}</div?
Sin embargo, recomendaría usar la biblioteca React Router , cuando necesite varias páginas.