How to highlight specific <li> element?

Marc - Published at Dev

Marc -

i am trying to learn react at the moment and i can't find a solution for following problem:

I am fetching some .json data which look like that:

[ {
"answerOptions": [
  "Answer A",
  "Answer B",
  "Answer C",
  "Answer D",
],
"correctAnswer": 1
},
{
"answerOptions": [
  "Answer A",
  "Answer B",
  "Answer C",
  "Answer D",
  "Answer E",
  "Answer F",
],
"correctAnswer": 4
}, {..}, {..} ]

Now i want to highlight the correct answer (i.e bold) but i don't know how to tell react what li element should be highlighted....

<ol className="answers-list">
 {
    props.answerOptions.map((answer) => (  
       <AnswerDetails 
          key={answer}
          answerOptions={answer}
        /> 
    ))
  }
</ol>

import './AnswerDetails.css';

const AnswerDetails = (props) => {

    return (
      <li>
       {props.answerOptions}
      </li>
     );
 }

export default AnswerDetails;

Maybe someone of you has a small hint for me :)

Greetz

Mr. Polywhirl

Just loop over the items in the array and map them to styled <li> elements.

const { useState } = React;

const answers = [{
  "answerOptions": [
    "Answer A",
    "Answer B",
    "Answer C",
    "Answer D",
  ],
  "correctAnswer": 1
}, {
  "answerOptions": [
    "Answer A",
    "Answer B",
    "Answer C",
    "Answer D",
    "Answer E",
    "Answer F",
  ],
  "correctAnswer": 4
}];

const AnswerDetails = ({ answerOptions, correctAnswer }) => (
  <li>
    <ol className="answers">
      {answerOptions.map((answerOption, index) => (
        <li
          key={answerOption}
          className={index === correctAnswer ? 'correct' : ''}
        >
          {answerOption}
        </li>
      ))}
    </ol>
  </li>
)

const Answers = ({ answers }) => (
  <ol className="question">
    {answers.map(({ answerOptions, correctAnswer }, index) => (
      <AnswerDetails
        key={JSON.stringify(answerOptions)+correctAnswer}
        correctAnswer={correctAnswer}
        answerOptions={answerOptions}
      />
    ))}
  </ol>
);

const App = () => (
  <div>
    <Answers answers={answers} />
  </div>
);

ReactDOM
  .createRoot(document.getElementById("root"))
  .render(<App />);

.question { list-style-type: decimal-leading-zero; }
.answers { list-style-type: upper-alpha; }
.answers { margin-bottom: 1em; }
.correct { font-weight: bold; color: green; }

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Collected from the Internet

Please contact [email protected] to delete if infringement.