Why don't I see the different li markups inside my page?

user_14759215 0
Viewed 56

Here is my code

export default function Search({ res }) {
    var arr = Object.entries(res)
    console.log(arr)
    return (
      <div>
        Here's the result :
        <ol>
            {arr.map((value, index) => {
                <li key={index}>{value.title}</li>
            })}
        </ol>
      </div>
    );
  }
  
  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
    };
  }

At this point :

console.log(arr)

This line prints me a beautiful array with 100 subarrays because the fetching was good from the API...

Data looks like this array : [["0", {title: "I like eating", textValue: "Yes, I do"}], ["1", {title: "I like dirinking", textValue: "Yes, I do"}]]

But in the page I have only the markup

    with nothing inside

    I don't succeed to know why...

    jsx next.js reactjs node.js javascript
    1 Answers

    You need to return the map function, also you should see some error on your console about that: Expected to return a value in arrow function. (array-callback-return)

    return (
  <div>
    Here's the result :
    <ol>
        {arr.map((value, index) => ( //<--return items
            <li key={index}>{value.title}</li>
        ))}
    </ol>
  </div>
);
    user_126087140
    Related