title: How to loop through fetch array and display results with Next.js
body: <p>I'm trying to loop through an array and fetch those results to display individually on my site but I keep getting the following error message:</p>
  <p><strong>TypeError: this.props.fetched.map is not a function</strong></p>
  <p>Not sure why I'm getting the error. Any ideas?</p>
  <p>This is the code I'm currently working on:</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;isomorphic-unfetch&quot;;
  
  export default class HomePage extends React.Component {
    static async getInitialProps() {
      const todoIdList = [1, 2, 3, 4];
      for (const id of todoIdList) {
        const response = await fetch(
          `https://jsonplaceholder.typicode.com/todos/${id}`
        );
        const todo = await response.json();
        return { fetched: todo.title };
      }
    }
  
    render() {
      return (
        &lt;&gt;
          &lt;div&gt;
            {this.props.fetched.map((datafetch, index) =&gt; (
              &lt;p&gt;{datafetch}&lt;/p&gt;
            ))}
          &lt;/div&gt;
        &lt;/&gt;
      );
    }
  }
  </code></pre>