ReactJS出力はHTMLにレンダリングされませんが、コンソールログで動作します

Question

this.state.chebi_resultsをJSONオブジェクトonSubmit（）で更新する検索ボックスがあります。出力をHTMLにレンダリングしようとする場合を除いて、すべて動作するようです。私は、順序付けられていないリストとして出力をレンダリングしようとしています。私のコンソールログは、私が望むものを正確に表示します。 HTMLが更新されないのはなぜですか？

chebiResults=()=>{ 
    return(
     <div className='search_results'> 
     <ul> 
     {this.state.chebi_results.forEach((element)=>{ 
      <li>{element.name}</li> 
      console.log(element.name) 
     })} 
     </ul> 
     </div> 
    ); 
    } 

    render(){ 
    return (
     <div className='ontology_tool'> 
     <div className='wraper'> 
     <div className='search'> 
      <div className='search_tool'> 
      <form onSubmit={this.handleSearch}> 
       <input type="text" name="query" value={this.state.form_query} onChange={this.setQuery}/> 
       <input type="Submit" value="Submit" /> 
      </form> 
      </div> 
      {this.chebiResults()} 
     </div> 
     <div className='selected'> 
     </div> 
     </div> 
     </div> 
    ); 
    } 

Answer 1

Array#forEachは何も返しません。あなたの機能をArray#mapに置き換えてください。

this.state.chebi_results.map((element) => { ... }); 

Answer 2

あなたはmapないforEachを使用する必要があります。

chebiResults=()=>{ 
    return(
     <div className='search_results'> 
     <ul> 
     {this.state.chebi_results.map((element)=>{ 
      console.log(element.name); 
      return <li>{element.name}</li>; 
     })} 
     </ul> 
     </div> 
    ); 
    }