Issue with mapping through the data - React - reactjs

Question

Do you know why am I not a able to map through the todos? I am following tutorial online and I have it exactly the same as the other guy but It's not mapping through the data. I get the json back and I can see the todos inside of the client-side console.
import React, { Fragment, useEffect, useState } from "react";
const ListTodos = () => {
const [todos, setTodos] = useState([]);
const getTodos = async () => {
try {
const response = await fetch("http://localhost:5000/todos");
const jsonData = await response.json();
setTodos(jsonData);
} catch (err) {
console.error(err.message);
}
};
useEffect(() => {
getTodos();
}, []);
return (
<Fragment>
<table className="table mt-5 text-center">
<thead>
<tr>
<th>Description</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{todos.map((todo) => {
<tr>
<td>{todo.description}</td>
<td>Edit</td>
<td>Delete</td>
</tr>;
})}
</tbody>
</table>
</Fragment>
);
};
Thanks

Answer 1

You should return the JSX if you are using curly braces in function. Like This
{todos.map((todo) => {
return (<tr>
<td>{todo.description}</td>
<td>Edit</td>
<td>Delete</td>
</tr>;
)})}
Else use parentheses to directly return , Like This
{todos.map((todo) => (<tr>
<td>{todo.description}</td>
<td>Edit</td>
<td>Delete</td>
</tr>
))}

Answer 2

you should use round brackets insted of curly braces in the map function
return (
<Fragment>
<table className="table mt-5 text-center">
<thead>
<tr>
<th>Description</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{todos.map((todo) => (
<tr>
<td>{todo.description}</td>
<td>Edit</td>
<td>Delete</td>
</tr>
))}
</tbody>
</table>
</Fragment>
);