title: Why don't I see the different li markups inside my page?
body: <p>Here is my code</p>
  <pre><code>export default function Search({ res }) {
      var arr = Object.entries(res)
      console.log(arr)
      return (
        &lt;div&gt;
          Here's the result :
          &lt;ol&gt;
              {arr.map((value, index) =&gt; {
                  &lt;li key={index}&gt;{value.title}&lt;/li&gt;
              })}
          &lt;/ol&gt;
        &lt;/div&gt;
      );
    }
    
    export async function getServerSideProps({ params }) {
      const { id } = params;
    
      const req = await fetch(
        `http://localhost:4000/reddit/${id}`
      );
      const res = await req.json();
    
      return {
        props: { res } // will be passed to the page component as props
      };
    }
  </code></pre>
  <p>At this point :</p>
  <pre><code>console.log(arr)
  </code></pre>
  <p>This line prints me a beautiful array with 100 subarrays because the fetching was good from the API...</p>
  <p>Data looks like this array : <code>[[&quot;0&quot;, {title: &quot;I like eating&quot;, textValue: &quot;Yes, I do&quot;}], [&quot;1&quot;, {title: &quot;I like dirinking&quot;, textValue: &quot;Yes, I do&quot;}]]</code></p>
  <p>But in the page I have only the markup <ol></ol> with nothing inside</p>
  <p>I don't succeed to know why...</p>