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.

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;

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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.