Reagieren foreach in JSX

Question

ich ein Objekt, das ich ausgeben wollen über REACT

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

und meine reagieren Komponente (abgeholzt), ist eine weitere Komponente

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; 

wie man es von der sehen kann Snippit oben, ich versuche, ein Array der Komponente einzufügen Antwort mit dem Array Answers in Requisiten, tut es iterieren, wird aber nicht in HTML ausgegeben.

Answer 1

Sie müssen das Elementarray an jsx übergeben. forEach gibt nichts zurück. Verwenden Sie also die Karte, die das Array wie folgt zurückgibt

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;