Reagieren Sie in JSX

Ich habe ein Objekt, das ich über REACT ausgeben möchte

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

und meine Reaktionskomponente (abgeschnitten) ist eine andere 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 Sie aus dem obigen Snippit sehen können, versuche ich, ein Array der Komponente Answer mithilfe des Arrays Answers in Requisiten einzufügen. Es iteriert, wird aber nicht in HTML ausgegeben.

Sie müssen ein Array von Elementen an übergeben jsx. Das Problem ist, dass forEachnichts zurückgegeben wird (dh es wird zurückgegeben undefined). Also besser verwenden, mapweil es ein Array wie dieses 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;