Tengo problemas para asignar signos de íconos correctos a etiquetas, usando valores de objetos.

por favor revise mi código primero.

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

y finalmente, tengo,

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

cuáles son los íconos que indican respuesta correcta, respuesta incorrecta del usuario y solo preguntas.

Se parece a esto.

Sin embargo, lo que estoy tratando de hacer es usar DATA.answer y DATA.userAnswer , quiero dar íconos apropiados a las etiquetas.

Por ejemplo. para DATA[1] , el Incorrect Sign debe colocarse junto a Golf (que fue la respuesta del usuario pero no la respuesta real), y el Correct Sign debe colocarse junto a Football. Además, otras opciones deben estar al lado del componente <Normal /> .

Tengo problemas para resolver este problema. Por favor, dame alguna orientación. Gracias.