When using React.js, clicking on an answer option will change the color of all options, not just the one that was clicked

Question

When using React.js, clicking on an answer option will change the color of all options, not just the one that was clicked

I'm currently working on my quiz page where all answer options change color when clicked. However, I only want the selected answer option to be colored based on its correctness. The data is being retrieved from a data.json array.

export default function QuizCard({ title, scenario, question, answers }) {
  const [bgColor, setBgColor] = useState('gray')
  function handleAnswerClick(isCorrect) {
    if (isCorrect === true) {
      setBgColor('green')
    } else {
      setBgColor('red')
    }
  }
  return (
    <>
      <Card bgColor={bgColor}>
        <h2>{title}</h2>
        <p>{scenario}</p>
        <h3>{question}</h3>
        <AnswerSection>
          {answers.map((answer => (
            <AnswerButton
              key={index}
              onClick={() => handleAnswerClick(answer.isCorrect)}
              isCorrect={answer.isCorrect}
              bgColor={bgColor}
            >
              {answer.answerText}
            </AnswerButton>
          ))}
        </AnswerSection>
      </Card>

Can anyone guide me on how to highlight only the chosen answer in red or green based on its correctness without affecting the rest of the options?

Your assistance is greatly appreciated, and I apologize for any confusion in my question. I began learning coding just 2 months ago, so I'm still getting familiar with the terminology.

javascript reactjs react-props use-state

Answer 1

Answer №1

Here's how you can achieve that:

export default function QuizCard({ title, scenario, question, answers }) {
  const [bgColor, setBgColor] = useState('gray')
  const [selectAnswer, setSelectAnswer] = useState(null)
  const handleAnswerClick = (isCorrect, answer) => {
    if (isCorrect === true) {
      setBgColor('green')
    } else {
      setBgColor('red')
    }
    setSelectAnswer(answer)
  }

  return (
    <>
      <Card bgColor={bgColor}>
        <h2>{title}</h2>
        <p>{scenario}</p>
        <h3>{question}</h3>
        <AnswerSection>
          {answers.map(answer => (
            <AnswerButton
              key={answer.answerText}
              onClick={() =>
                handleAnswerClick(answer.isCorrect, answer.answerText)
              }
              isCorrect={answer.isCorrect}
              bgColor={answer.answerText === selectAnswer ? bgColor : 'gray'} // assign bgColor in state only to the right answer and for others use gray as default
            >
              {answer.answerText}
            </AnswerButton>
          ))}
        </AnswerSection>
      </Card>
    </>
  )
}

Answer 2

Here's how you can achieve that:

export default function QuizCard({ title, scenario, question, answers }) {
  const [bgColor, setBgColor] = useState('gray')
  const [selectAnswer, setSelectAnswer] = useState(null)
  const handleAnswerClick = (isCorrect, answer) => {
    if (isCorrect === true) {
      setBgColor('green')
    } else {
      setBgColor('red')
    }
    setSelectAnswer(answer)
  }

  return (
    <>
      <Card bgColor={bgColor}>
        <h2>{title}</h2>
        <p>{scenario}</p>
        <h3>{question}</h3>
        <AnswerSection>
          {answers.map(answer => (
            <AnswerButton
              key={answer.answerText}
              onClick={() =>
                handleAnswerClick(answer.isCorrect, answer.answerText)
              }
              isCorrect={answer.isCorrect}
              bgColor={answer.answerText === selectAnswer ? bgColor : 'gray'} // assign bgColor in state only to the right answer and for others use gray as default
            >
              {answer.answerText}
            </AnswerButton>
          ))}
        </AnswerSection>
      </Card>
    </>
  )
}

Answer 3

Answer №2

It is important to note that setting the 'bgColor' for all answer buttons may not be the most efficient approach. Instead, consider modifying the logic to only set the bgColor for the correct answer. This small adjustment should help streamline the process.

export default function QuizCard({ title, scenario, question, answers }) {
  const [bgColor, setBgColor] = useState('gray')
  function handleAnswerClick(isCorrect) {
    if (isCorrect === true) {
      setBgColor('green')
    } else {
      setBgColor('red')
    }
  }
  return (
    <>
      <Card bgColor={bgColor}>
        <h2>{title}</h2>
        <p>{scenario}</p>
        <h3>{question}</h3>
        <AnswerSection>
          {answers.map((answer => (
            <AnswerButton
              key={answer.answerText}
              onClick={() => handleAnswerClick(answer.isCorrect)}
              isCorrect={answer.isCorrect}
              bgColor={answer.isCorrect ? bgColor : 'gray'} // Set bgColor in state only for correct answer, default to gray for others
            >
              {answer.answerText}
            </AnswerButton>
          ))}
        </AnswerSection>
      </Card>

Answer 4

It is important to note that setting the 'bgColor' for all answer buttons may not be the most efficient approach. Instead, consider modifying the logic to only set the bgColor for the correct answer. This small adjustment should help streamline the process.

export default function QuizCard({ title, scenario, question, answers }) {
  const [bgColor, setBgColor] = useState('gray')
  function handleAnswerClick(isCorrect) {
    if (isCorrect === true) {
      setBgColor('green')
    } else {
      setBgColor('red')
    }
  }
  return (
    <>
      <Card bgColor={bgColor}>
        <h2>{title}</h2>
        <p>{scenario}</p>
        <h3>{question}</h3>
        <AnswerSection>
          {answers.map((answer => (
            <AnswerButton
              key={answer.answerText}
              onClick={() => handleAnswerClick(answer.isCorrect)}
              isCorrect={answer.isCorrect}
              bgColor={answer.isCorrect ? bgColor : 'gray'} // Set bgColor in state only for correct answer, default to gray for others
            >
              {answer.answerText}
            </AnswerButton>
          ))}
        </AnswerSection>
      </Card>

Answer 5

Answer №3

If you want to write more concise code in the function handleAnswerClick, try using this approach:

const handleClick = (correct, answer) => {
  const color = correct ? 'green' : 'red';
  setBackground(color);
  setSelected(answer);
}

Answer 6

If you want to write more concise code in the function handleAnswerClick, try using this approach:

const handleClick = (correct, answer) => {
  const color = correct ? 'green' : 'red';
  setBackground(color);
  setSelected(answer);
}

When using React.js, clicking on an answer option will change the color of all options, not just the one that was clicked

Answer №1

Answer №2

Answer №3

Similar questions

Looking for a solution to update data in React components after a refresh using databinding and array push

Help Needed: Adding a Simple Element to jQuery Tabs Script

AngularJS: Functions may return false due to the asynchronous nature of services

Encountering the error "tsx is not defined" during a Jest test in a React/TypeScript project

What is causing the sorting table to fail in React when using useState?

Performing a JSON POST Request: Steps for sending a POST request with JSON data format

Ways to combine duplicate entries within a column using Ruby on Rails?

Modifying the structure of serialized data

Utilize JavaScript to submit the FORM and initiate the 'submit' Event

An application running on Node.js/Express and hosted on Digital Ocean encounters the "Cannot get /" error message

Obtain the data from onTouchTap action

Sending user input from search component to main App.js in React

"Utilize React Native to access the gallery with the help of an

JSON function invocation is failing to load

The MDX syntax highlighting feature seems to be malfunctioning in Next.js

Error in TypeScript React: "Could not locate module: Unable to locate 'styled-components'"

Populate a Material UI Select Component in real-time based on the current state of other components

Update the displayed locations on Google Maps by fetching and displaying marker data

Retrieve recently appended DOM elements following the invocation of createComponent on a ViewContainerRef

Is it possible to incorporate another hue into Material UI's color palette?