Repository navigation
Problem with my task tracker app #11355
Description
On my app react-task-tracker-app
my tasks will not show up or save onto my server with json
import { useState, useEffect } from 'react'
import Header from './componets/Header'
import Tasks from './componets/Tasks'
import AddTask from './componets/AddTask'
const App = () => {
const [showAddTask, setShowAddTask] = useState(false)
const [tasks, setTasks] = useState([])
useEffect(() => {
const getTasks = async () => {
const tasksFromServer = await fetchTasks()
setTasks(tasksFromServer)
}
getTasks()
}, [])
const fetchTasks = async () => {
const res = await fetch('http://localhost:5000/tasks')
const data = await res.json()
console.log(data)
}
const fetchTask = async (id) => {
const res = await fetch(http://localhost:5000/tasks/${id})
const data = await res.json()
return data
}
const addTask = async (task) => {
const res = await fetch('http://localhost:5000/Tasks', {
method: 'POST',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(task)
})
const data = await res.json()
setTasks([...tasks, data])
const id = Math.floor(Math.random() * 10000) + 1
const newTask = { id, ...task }
setTasks([...tasks, newTask])
}
const deleteTask = async (id) => {
await fetch(`http://localhost:5000/Tasks/${id}`, {
method: 'Delete'
})
setTasks(tasks.filter((task) => task.id !== id))
}
const toggleReminder = async (id) => {
const taskToToggle = await fetchTask(id)
const updTask = {
...taskToToggle,
reminder: !taskToToggle.reminder
}
const res = await fetch(`http://localhost:5000/tasks/${id}`, {
method: 'PUT',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(updTask)
})
const data = await res.json()
setTasks (
tasks.map((task) =>
task.id === id ? {
...tasks, reminder:
!data.reminder
} : task
)
)
}
return (
<Header onAdd={() => setShowAddTask
(!showAddTask)} showAdd={showAddTask}
/>
{showAddTask && }
{
tasks.length > 0 ?
: 'No tasks to show'
}
</div>
);
}
export default App
Activity