Estoy tratando de aprender a reaccionar en este momento y no puedo encontrar una solución para el siguiente problema:
Estoy obteniendo algunos datos .json que se ven así:
[ { "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 }, {..}, {..} ]Ahora quiero resaltar la respuesta correcta (es decir, en negrita), pero no sé cómo reaccionar qué elemento li debe resaltarse...
<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;Tal vez alguien de ustedes tiene una pequeña pista para mí :)
saludo
También puedes agregar corriente a los accesorios.
<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;Simplemente recorra los elementos de la matriz y asígnelos a elementos <li> con estilo.
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>Recuerde que las matrices de JavaScript están indexadas en base cero. Suponiendo que "correctAnswer" corresponda a la lista ordenada de "answerOptions", puede escribirlo así.
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> ); };