title: Foreach loop in return statement of react
body: <p>I have fetched some information an API and now I am trying to show the information fetched from it. The information which I have fetched includes books_authors , books_id's , price and the dataset is quite large and I am unable to display this information from my following approach...can someone help me with it... I am new to react</p>
  
  <p>This is what I have tried so far:</p>
  
  <pre><code>import React from "react";
  import Head from './head';
  
  function App(){
  
    let s;
    const proxy = 'http://cors-anywhere.herokuapp.com/';
    const api = `${proxy}http://starlord.hackerearth.com/books`;
    fetch(api)
    .then(response =&gt;{
      return response.json();
    })
    .then(data =&gt;{
      console.log(data);
      data.forEach((index) =&gt; {
         s=index;
        &lt;Head s/&gt;
      });
    });
    return(
      &lt;Head /&gt;
    );
  }
  
  export default App;
  
  
  //the head component
  
  
  import React from "react";
  
  function Head(props){
  
      return(
          &lt;div className="app"&gt;
              &lt;div className="heading"&gt;
                  &lt;h1&gt;BOOK_CAVE&lt;/h1&gt;
                  &lt;div className="heading_description"&gt;So many books...so 
  little time...&lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="author"&gt;{props.authors}&lt;/div&gt;
              &lt;div className="id"&gt;{props.bookID}&lt;/div&gt;
              &lt;div className="price"&gt;{props.price}&lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default Head;
  </code></pre>