reactjs - react - Reaccionar para cada en JSX

react js performance

Question

Tengo un objeto que quiero enviar a través de REACT

question = {
    text: "Is this a good question?",
    answers: [
       "Yes",
       "No",
       "I don''t know"
    ]
} 

y mi componente reaccionar (reducir), 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 de código anterior, estoy tratando de insertar una matriz del componente Respuesta utilizando la matriz Respuestas en props, hace iteración pero no se imprime en HTML.

Answer 1

Necesitas pasar una matriz de elementos a jsx . El problema es que forEach no devuelve nada (es decir, devuelve undefined ). Así que mejor usa el map porque devuelve una matriz como esta

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={i} answer={answer} />) 
        })}
}

export default QuestionSet;