Actualmente estoy programando una lista de tareas pendientes con la pila PERN. Tengo el siguiente problema: cuando hago un "mapa" de todos, obtengo el siguiente resultado: {"description":"wash the dishes"} . Mi función getTodos:

 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); } }; // states const [todos, setTodos] = useState([]); useEffect(() => { getTodos(); }, []);

Un archivo console.log(todos) genera lo siguiente:

 Array [ {…} ]​ 0: Object { todo_id: 9, description: "{\"description\":\"wash the dishes\"}" }​ Length: 1​ <prototype>: Array[]

mapa:

 {todos.length != 0 && todos.map((todo) => ( <tr key={todo.todo_id}> <td>{todo.description}</td> <td>Edit</td> <td>Delete</td> </tr> ))}

devuelve {"description":"wash the dishes"} , pero solo debe salir "wash the dishes" .

Mi función backend getTodos:

 //get all todos app.get("/todos", async (req, res) => { try { const allTodos = await pool.query("SELECT * FROM todo"); res.json(allTodos.rows); } catch (err) { console.error(err.message); } });