forEach() dans React JSX n'affiche pas de code HTML

Question

J'ai un objet que je veux sortir via React :

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

et mon composant de réaction (coupé), est un autre composant

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;

Comme vous pouvez le voir dans le snippit ci-dessus, j'essaie d'insérer un tableau du composant Answer en utilisant le tableau Answers dans les props, il itère mais n'est pas édité en HTML.

Answer 1

Vous devez passer un tableau d'éléments à jsx . Le problème est que forEach ne retourne rien (c'est-à-dire qu'il retourne undefined ) . Il est donc préférable d'utiliser map parce que map renvoie un tableau :

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;