Estoy mapeando la variable de request y representándola en la página, tiene una matriz de objetos con una question , propiedades de correct_answer y respuesta incorrect_answer , y también configuro un estado llamado disable que se alterna entre verdadero y falso cuando se hace clic en el botón de correct_answer para hacer que el botón de respuesta correcta se deshabilite o no se pueda hacer clic para cada pregunta, pero hacer clic en el botón de respuesta correcta para UNA pregunta desactiva todos los botones de respuesta correcta para las OTRAS preguntas
Básicamente, quiero deshabilitar el botón de respuesta correcta al hacer clic o hacer que se pueda hacer clic una vez
const [request, setRequest] = React.useState([]) const [disable, setDisable] = React.useState(false); function scoreFunction (event){ setDisable(true) setScore(prevScore => prevScore + 1) } 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})))) }, []) // console.log(request) const questionElements = request.map(req => { return ( <Question question = {req.question} correct_answer ={req.correct_answer} incorrect_answers = {req.incorrect_answers} scoreFunction = {scoreFunction} disabled = {disable} /> ) }) // The Question Component export default function Question (props){ const incorrectAnswers = props.incorrect_answers.map(ans => { return ( <button className ="button">{ans}</button> ) }) return( <div className = "question-div"> <h1 className = "question">{props.question}</h1> <div className = "answerBlock"> <button disabled = {props.disabled} className ="button correct" onClick = {props.scoreFunction}>{props.correct_answer} </button> {incorrectAnswers} </div> <hr /> </div> ) } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>Esencialmente, el problema se debe a que su estado de useState está en el lugar equivocado. Debe estar dentro del componente Question para que tenga 1 bandera deshabilitada por pregunta en lugar de 1 global.
export default function Question (props) { const [disabled, setDisabled] = useState(false) const incorrectAnswers = props.incorrect_answers.map(ans => { return ( <button className ="button">{ans}</button> ) }) return( <div className = "question-div"> <h1 className = "question">{props.question}</h1> <div className = "answerBlock"> <button disabled = {disabled} className ="button correct" onClick = {() => { setDisabled(true) props.scoreFunction() }>{props.correct_answer} </button> {incorrectAnswers} </div> <hr /> </div> ) }