OK guys, so I've been stuck with this thing for a while. I think I might be overlooking something or..I've got the react hooks wrong. Anything that you can point out on my code would be helpful and appreciated.
I am working on my todo app. The backend is here:
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}`));
here is the json file:
{"title": "buy apples", "note": "1kg"},
{"title": "feed the cat", "note": "full bowl"}]
here is the app:
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;
this is the component i need help with:
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;
Thank you for your time.
this is what helped me: i realized ive had an array so i should iterate over to show every todo (starting with the title). so i guess i have to be more specific how i want my data to be showed.
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>
))}