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

CodePudding user response：

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; 

CodePudding user response：

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>

CodePudding user response：

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