ReactJSのレンダリング機能のループ

Question

以下のコードで何が問題なのかよく知っているかもしれませんか？私は<TextNote>タグのループで何かが間違っていると思いますが、エラーメッセージがないので何が間違っているかはわかりません。ありがとう

EDIT FYI、ボタンのみがレンダリングされ、TextNoteはまったくレンダリングされません。 TextNoteは別のJSファイルで、完全に動作します。

render() { 
return (
    <div className="textBoard"> 
    {this.state.textNotes.forEach((note) => { 
     return (<TextNote key={note.id} 
        id={note.id} 
        onChange={this.update} 
        onRemove={this.remove}> 
       {note.note} 
     </TextNote>) 
    } 
    )} 
    <button onClick={() => this.add('New Text')}>ADD</button> 
    </div> 
)} 

Answer 1

forEachはreturnを負いません。代わりにmapを使用してください。

render() { 
return (
    <div className="textBoard"> 
    {this.state.textNotes.map((note) => { 
     return (<TextNote key={note.id} 
        id={note.id} 
        onChange={this.update} 
        onRemove={this.remove}> 
       {note.note} 
     </TextNote>) 
    } 
    )} 
    <button onClick={() => this.add('New Text')}>ADD</button> 
    </div> 
)} 

Answer 2

あなたはそれがまたforEach方法で作業が、少し異なる方法で得ることができます。

render(){ 
    const items = []; 
    this.state.textNotes.forEach((note) => { 
    items.push(<TextNote // instead of return push it in an array 
       key={note.id} 
       id={note.id} 
       onChange={this.update} 
       onRemove={this.remove}> 
       {note.note} 
       </TextNote> 
    }) 
    return <div> 
    {items} 
    </div> 
} 

私もそれはあなた