Consolo.log shows I'm getting my items from api, however they are not rendered on my page?

Question

Here is the code that I wrote.

import React from "react";
import { Todo } from "../../typings";

import Link from "next/link";

const fetchTodos = async () => {
  const res = await 

fetch("https://jsonplaceholder.typicode.com/todos/");
  const todos: Todo[] = await res.json();
  console.log(todos);
  return todos;
};

async function TodoList() {
  const todos = await fetchTodos();
  return (
    <>
      {todos.map((todo) => {
        <p>
          <Link href={`/todos/${todo.id}`}>Todo: {todo.id}</Link>
        </p>;
      })}
    </>
  );
}

export default TodoList;

I have trouble using map to render the items on my page, but I do have my items logged on console, so I think it's just the map function. Not sure what's not working.

Answer 1

Whenever we use map function always need to use the return statement so that data could render and user could see data on page.

{todos.map((todo) => {
     return (
     <>
        <p>
          <Link href={`/todos/${todo.id}`}>Todo: {todo.id}</Link>
        </p>
     </>
     )
 })}

Without using it couldn't see anything :)

I hope this helps!