How can I give appropriate icons in HTML tag using object values in React?-CodePudding

I'm having trouble allocating right icon signs to tags, using values of objects.

please check my code first.

// index.js
// I just made this code, so there might be misspelling.

const DATA = [
  {
    question: what is the name of the inventor?,
    a: Mark,
    b: Jacob,
    c: Aden,
    d: Morrie,
    answer: a,
    userAnswer: c
  },
  {
    question: what is the most favorite sports in United States?,
    a: Golf,
    b: Soccer,
    c: Football,
    d: Basketball,
    answer: c,
    userAnswer: a
  },
]

const index = () => {
    const wrongQuestions = DATA.map((answer) => (
    <WrongAnswerLayout props={answer} key={answer.question} />
  ))

  return (
    <ul>
      {wrongQuestions}
    </ul>
  )
}

// WrongAnswerLayout.js

const WrongAnswerLayout = ({ props }) => {
  return (
    <li>
      <div>{props.question}</div>
      <p>{props.a}</p>
      <p>{props.b}</p>
      <p>{props.c}</p>
      <p>{props.d}</p>
      <p>userAnswer {props.userAnswer}</p>
    </li>
  )
}

and finally, I have,

import { Correct, Incorrect, Normal } from 'assets/svgs'

which are the icons that signs correct answer, incorrect user answer, and just questions.

It looks like this.

However, what I'm trying to do is using DATA.answer and DATA.userAnswer, I want to give appropriate icons to tags.

For example. for the DATA[1], Incorrect Sign should be placed next to Golf (which was user's answer but not the actual answer), and Correct Sign should be placed next to Football. Moreover, other choices should be next to <Normal /> component.

I'm having trouble figuring out this problem. Please give me some guidance. Thank you.

CodePudding user response：

You can loop over all the options and conditionally display the appropriate icon.

const DATA = [
  { question: "What is the name of the inventor?", a: "Mark", b: "Jacob", c: "Aden", d: "Morrie", answer: "a", userAnswer: "c" },
  { question: "What is the most favorite sports in United States?", a: "Golf", b: "Soccer", c: "Football", d: "Basketball", answer: "c", userAnswer: "a" },
];

const App = () => (
  <ul>
    {DATA.map((ques) => (
      <WrongAnswerLayout ques={ques} key={ques.question} />
    ))}
  </ul>
);

const WrongAnswerLayout = ({ ques }) => {
  return (
    <li>
      <p><strong>{ques.question}</strong></p>
      <ol>
        {["a", "b", "c", "d"].map((opt) => (
          <li key={opt}>
            {ques[opt]}{" "}
            {ques.answer === opt && <i className="fa-solid fa-check" />}
            {ques.answer !== ques.userAnswer && ques.userAnswer === opt && (
              <i className="fa-solid fa-xmark" />
            )}
          </li>
        ))}
      </ol>
      <p>User's Answer: {ques.userAnswer}</p>
    </li>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="root"></div>