如何仅禁用映射组件的单击按钮

Question

I am mapping over the request variable and rendering it on the page, it has an array of object with a question , correct_answer and incorrect_answer properties, and I also set a state named disable that is toggled between true and false when the correct_answer button is clicked to make the correct answer button get disabled or unclickable for each question, but clicking the correct answer button for ONE question disables all correct answer buttons for the OTHER questions

I basically want to disable the correct answer button on click or making it clickable once

 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>

Answer 1

Essentially the issue is because your disabled useState is in the wrong place. It needs to be inside the Question component so you have 1 disabled flag per question rather than 1 global one.

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>
        
    )
}