OK chicos, así que he estado atascado con esto por un tiempo. Creo que podría estar pasando por alto algo o... tengo los ganchos de reacción equivocados. Cualquier cosa que pueda señalar en mi código sería útil y apreciada.
Estoy trabajando en mi aplicación de tareas pendientes. El backend está aquí:
const express = require('express'); const app = express(); const port = 5000; const {loadList} = require('./todolist'); const cors = require('cors'); app.use(cors()); app.get('/todo', (req, res) => { res.send(loadList()); }) app.listen(port, () => console.log(`Server running on port ${port}`));aquí está el archivo json:
{"title": "buy apples", "note": "1kg"}, {"title": "feed the cat", "note": "full bowl"}]aquí está la aplicación:
import Header from "./components/Header"; import Form from "./components/Form"; import TodoList from "./components/TodoList"; import "./App.css" function App() { return ( <div className="app-wrapper"> <Header /> <div> <Form /> </div> <TodoList /> </div> ); } export default App;este es el componente con el que necesito ayuda:
import { useState, useEffect } from 'react'; const TodoList = () => { const [ todos, setTodos ] = useState(null); useEffect(() => { fetch('http://localhost:5000/todo') .then(res => res.json()) .then(data => setTodos(data.title)) }) return( <div> this is where the todolist should be {todos} </div> ) } export default TodoList;Gracias por tu tiempo.
esto es lo que me ayudó: me di cuenta de que tenía una matriz, así que debería iterar para mostrar cada tarea pendiente (comenzando con el título). así que supongo que tengo que ser más específico sobre cómo quiero que se muestren mis datos.
this is where the todolist should be {todos.map((todo) => ( <li className="list-item" key={todo.title}> <input type="text" value={todo.title} className={`list ${todo.completed ? "complete" : ""}`} onChange={(event) => event.preventDefault()} /> </li> ))}