title: How do i loop through an array of objects in react
body: <p>I want to loop through the array of objects in my <code>React</code> code.
  I'm using <code>getStaticProps()</code> to fetch my data from an online fake <code>API</code> server.</p>
  <p>I'm using <code>nextjs</code> for my code. How do I do this with <code>for</code> or <code>while</code> or any of the loops?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Head from 'next/head'
  
  
  export async function getStaticProps() {
      const res = await fetch('https://jsonplaceholder.typicode.com/todos')
      const data = await res.json()
  
      return {
          props: { todos: data }
      }
  }
  //the getStaticProps runs before the component is rendered, fetches the data and waits for the data and pumps it into the component so the component can be rendered with the data inside it.
  
  const Todos = ({ todos }) =&gt; {
      return (
          &lt;&gt;
              &lt;Head&gt;
                  &lt;title&gt;To Do List&lt;/title&gt;
              &lt;/Head&gt;
              &lt;div&gt;
                  &lt;h1&gt;To Do List&lt;/h1&gt;
                  {todos.map(todoList =&gt; (
                      &lt;div key={todoList.id}&gt;
                          &lt;a&gt;&lt;h3&gt; 
                          {  todoList.title}
  
                          &lt;/h3&gt; &lt;/a&gt;
                      &lt;/div&gt;
                  ))}
              &lt;/div&gt;
          &lt;/&gt;
      );
  }
  
  export default Todos;</code></pre>
  </div>
  </div>
  </p>