export const QuizData = [ { id: 0, question: `What is the Capital of India?`, options: [`New Delhi`, `Mumbai`, `Pune`, `Hyderabad`], answer: `New Delhi` }, { id: 1, question: `Any question here`, options: [`any`, `options`, `here`, ` `], answer: `ans` }, { id: 2, question: `Any question here`, options: [`any`, `options`, `here`, ` `], answer: `ans` }, ] //buttons <button className="btn btn-primary" onClick={() => this.indexHandler(0)} > 1 </button> <br /> <button className="btn btn-primary" onClick={() => this.indexHandler(1)} > 2 </button> <br /> <button className="btn btn-primary" onClick={() => this.indexHandler(2)} > 3 </button>Más arriba se menciona la lista de preguntas de referencia. Entonces, por ahora estoy usando botones estáticos (por ejemplo, en //Botones) y lo que quiero es, dependiendo de la cantidad de preguntas de los datos, se debe crear la misma cantidad de botones.
Un buen enfoque sería mantener dos componentes separados:
QuestionList.js )Question.js )QuestionList.js
const QuestionList = () => { const QuizData = [...] const indexHandler = (id) => {...} return( <> {QuizData.map(question => ( <Question key={question.id} id={question.id} indexHandlerCallback={indexHandler} /> ))} </>) }Pregunta.js
const Question = ({ id, indexHandlerCallback }) => { const hanldeClick = () => { // dispatch callback or any other actions } return ( <button className="btn btn-primary" onClick={hanldeClick}> {id+1} </button> ) }