单击组件时如何更改仅通过.map() 渲染的一个反应组件的样式

Question

how to change the style of only one react component that is being render through.map() when the component is clicked. I'm trying to make a quiz and I want the component background to change to one color if the right answer is clicked and to another if the wrong answer is clicked. Using only functional components and hooks

const [correct, setCorrect] = useState(false);

const styles = {
    correct: { backgroundColor: 'green' },
    incorrect: { backgroundColor: 'red' }
};

const DUMMY_QUESTIONS = [
    {
        id: 1,
        question: 'What is the Big O of merge sort?',
        options: [
            { number: 1, answer: 'O(1)'},
            { number: 2, answer: 'O(log n)' },
            { number: 3, answer: 'O(n)' },
            { number: 4, answer: 'O(n log n)' }
        ],
        answer: 'O(n log n)'
    }
];

const handler = opt => {
    if (opt === DUMMY_QUESTIONS[0].answer){
        console.log(opt);
    }
}

return (
    <Fragment>
        <div>
            <Question question={DUMMY_QUESTIONS[0].question} />
        </div>
        <div>
            {DUMMY_QUESTIONS[0].options.map(option =>
                <AnswerOption 
                    key={option.number} 
                    id={option.number}
                    option={option.answer}
                    click={() => {if (option.answer === DUMMY_QUESTIONS[0].answer) setCorrect(true) }}
                    correct={correct} />
            )}
        </div>
    </Fragment>
);

other Component:

const AnswerOption = props => {
return (
    <div 
        className={`answer-option ${props.correct && 'answer-option--correct'}`} onClick={() => {props.click(props.option)}} >
        <p>{props.option}</p>
    </div>
);

};

Answer 1

The best way to make it work, use the state for selectedAnswer then use selectedAnswer for comparing items inside the style.

Also, I did make you another state for the user answers for saving answers on that.

 const styles = { correct: { backgroundColor: 'green' }, incorrect: { backgroundColor: 'red' } }; const DUMMY_QUESTIONS = [ { id: 1, question: 'What is the Big O of merge sort?', options: [ { number: 1, answer: 'O(1)' }, { number: 2, answer: 'O(log n)' }, { number: 3, answer: 'O(n)' }, { number: 4, answer: 'O(n log n)' } ], answer: 'O(log n)' },{ id: 2, question: 'Another question?', options: [ { number: 1, answer: 'O(1)' }, { number: 2, answer: 'O(log n)' }, { number: 3, answer: 'O(n)' }, { number: 4, answer: 'O(n log n)' } ], answer: 'O(n)' } ]; const App = () => { const [userAnswers, setUserAnswers] = React.useState({}); return( <React.Fragment> {DUMMY_QUESTIONS.map(question => ( <Question question={question} userAnswers={userAnswers} setUserAnswers={setUserAnswers}/> ))} <hr/> <p>Object of user answers: {JSON.stringify(userAnswers)}</p> </React.Fragment> ) } const Question = ({question, userAnswers, setUserAnswers}) => { const [slectedAnswer, setSelectedAnswer] = React.useState(null); const clickHandler = (selected) => { setUserAnswers({...userAnswers,[question.id]:{ selectedAnswer: selected, isCorrect: selected === question.answer }}) setSelectedAnswer(selected); } const styleChecker = (option) => slectedAnswer? slectedAnswer === option? question.answer === slectedAnswer? styles.correct: styles.incorrect: {}: {}; return ( <div> <h4>{question.question}</h4> {question.options.map(option => ( <AnswerOption key={option.number} id={option.number} option={option.answer} onClick={() => slectedAnswer? {}: clickHandler(option.answer)} style={styleChecker(option.answer)} /> ))} </div> ) }; const AnswerOption = ({ option, ...rest }) => ( <div {...rest}> <p>{option}</p> </div> ); ReactDOM.render(<App />, document.getElementById("react"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>