API結果を要素にレンダリングする方法は？

Question

handleExampleClick関数では、console.log(res.body.matches[i].id);の結果でApp-menuViewerを更新したいと考えています。今はコンソールに情報を記録しています。しかし、私は情報がapp-menuviewerを実際に更新したいと思っています。これどうやってするの？あなたはより多くの情報を表示する必要がある場合はレポはこちらです：所有者が合意したようhttps://github.com/KanteLabs/Whats-Cookin/

function handleCookbookClick() { 
    ReactDOM.render(
    <Cookbook />, 
    document.getElementById('App-menuViewer') 
);} 


function handleExampleClick() { 
    ReactDOM.render(
    request 
    .get(searchRecipes) 
    .query({ q: searchParameters2 }) // query string 
    .type('json') 
    .end(function(err, res){ 
    for(var i = 0; i < res.body.matches.length;i++){ 
     console.log(res.body.matches[i].id); 
    } 
    }), 
    document.getElementById('App-menuViewer') 
);} 



class App extends Component { 
    render() { 
    return (
    <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>"What's Cookin'"</h2> 
     <input className="searchBox" placeholder="search something"/> 
      <button onClick={handleExampleClick}>Example</button> 
    </div>  
    <div id="App-menu"> 
      <button onClick={handleCookbookClick}>Cookbook</button> 
      <button>Recommendations</button> 
      <button>Shopping List</button> 
      <button>Search Options</button> 
    </div> 
     <div id="App-menuViewer"></div> 
     <div className="App-SearchResults"> 
      <p>{ingredients}</p> 
     </div> 
    </div> 
    ); 
    } 
} 

export default App; 

Answer 1

は答えとしてこれを置く:)

回答

ストアあなたの値変数と使用中要素の値を設定するinnerHTML

var recipeName = ""; 


.... 
.end(function(err, res){ 
for(var i = 0; i < res.body.matches.length;i++){ 
    recipeName += res.body.matches[i].id; //assuming that its a string value  
} 
}), 

document.getElementById('App-menuViewer').innerHTML = recipeName; 

....