Reagisci foreach in JSX

Ho un oggetto che desidero trasmettere tramite REACT

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

e il mio componente di reazione (tagliato), è un altro 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;

come puoi vedere dallo snippit sopra, sto cercando di inserire un array del componente Answer usando l'array Answers in props, ittera ma non viene emesso in HTML.

Devi passare un array di elementi a jsx. Il problema è che forEachnon restituisce nulla (cioè restituisce undefined). Quindi è meglio usarlo mapperché restituisce un array come questo

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;