Reaccionar foreach en JSX

109

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 (cortar), 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 arriba, estoy tratando de insertar una matriz del componente Respuesta mediante el uso de la matriz Respuestas en accesorios, itera pero no se genera en HTML.

Miguel
fuente

Respuestas:

213

Necesita pasar una matriz de elementos a jsx. El problema es que forEachno devuelve nada (es decir, devuelve undefined). Así que mejor uso mapporque 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;
Prakash Sharma
fuente
7
Usar var i como clave no es una buena opción en algunas situaciones para dom virtual.
maquannene
3
@maquannene De hecho, gracias por señalarlo. Aquí hay una buena publicación sobre por qué medium.com/@robinpokorny/…
cyberwombat
1
FWIW también puede pasar en otro tipo de colecciones. Solo necesitas desenrollarlos para que funcionen .map(). por ejemplo, Object.keys(collection).map(key => ...y asignar una variable para trabajar cómodamente concollection[key]
John Kaster