Pro styling používám PERN Stack s bootstrapem. Chci tedy přistupovat ke svým datům JSON a zobrazovat je ve formě seznamů úkolů. Když jsem se pokusil použít funkci mapy, dostal jsem TypeError:
Zde je kód:
import React, { useState, useEffect } from "react"; const ListToDo = () => { const [todos, setTodos] = useState([]); const getTodos = async () => { try { const res = await fetch("http://localhost:3000/todos"); const jsonData = await res.json(); console.log(jsonData.data.todos); setTodos(jsonData.data.todos); } catch (err) { console.log("ERROR: ", err); } }; useEffect(() => { getTodos(); }, []); return ( <> <ul className="list-group my-4 "> {todos.map((todo) => ( <li className="list-group-item d-flex justify-content-between align-items-center"> {todo.description} <span className=""> <button className="btn btn-dark ">Edit</button> <span> </span> <button className="btn btn-dark ">Delete</button> </span> </li> ))} </ul> </> ); }; export default ListToDo;
Odpověď
Špatně jsem napsal svou proměnnou. Takže problém byl, že jsem psal jsonData.data.todos
místo toho vypnuto jsonData.data.toDos
.