如何突出特定<li>元素？

Question

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 (ie 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

Answer 1

you can alse add corrent into props.

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

import './AnswerDetails.css';
import classNames from 'classnames';

const AnswerDetails = (props) => {
  return <li className={classNames({corrent: props.correctAnswer === props.index})>
   {props.answerOptions}
  </li>;
};


export default AnswerDetails; 

Answer 2

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>

Answer 3

Remember javascript arrays are zero-based indexed. Assuming "correctAnswer" corresponds to the ordered-list of "answerOptions", you can write it like this.

answers.json

{
  "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
    }
  ]
}

import json from "./answers.json";

const { answers } = json;

export default function App() {
  return (
    <div>
      <AnswerDetails answers={answers} />
    </div>
  );
}

const AnswerDetails = (props) => {
  return (
    <ul>
      {props.answers.map(({ answerOptions, correctAnswer }, index) => (
        <AnswerComponent
          key={index}
          options={answerOptions}
          correctAnswer={correctAnswer}
        />
      ))}
    </ul>
  );
};

const AnswerComponent = (props) => {
  return (
    <ol>
      {props.options.map((option, index) => (
        <li
          key={option}
          style={{
            fontWeight: props.correctAnswer - 1 === index ? 700 : "initial"
          }}
        >
          {option}
        </li>
      ))}
    </ol>
  );
};