Tengo un objeto que quiero generar a través de React:
question = { text: "Is this a good question?", answers: [ "Yes", "No", "I don't know" ] }y mi componente de reacción (recortado), es otro componente
class QuestionSet extends Component { render(){ <div className="container"> <h1>{this.props.question.text}</h1> {this.props.question.answers.forEach(answer => { console.log("Entered"); //This does ifre <Answer answer={answer} /> //THIS DOES NOT WORK })} } export default QuestionSet;como puede ver en el fragmento anterior, estoy tratando de insertar una matriz del componente Respuesta usando la matriz Respuestas en accesorios, itera pero no se genera en HTML.
Debe pasar una matriz de elementos a jsx . El problema es que forEach no devuelve nada (es decir, devuelve undefined ) . Entonces, es mejor usar map porque map devuelve una matriz:
class QuestionSet extends Component { render(){ <div className="container"> <h1>{this.props.question.text}</h1> {this.props.question.answers.map((answer, i) => { console.log("Entered"); // Return the element. Also pass key return (<Answer key={answer} answer={answer} />) })} } export default QuestionSet;