1

am trying update my todo list in my project using useContext api, i want to remove completed if i click of input checkbox but whenever i click on it am getting this error TypeError: Failed to execute 'fetch' on 'Window': Invalid name at _callee$, i have check the file name to see if am missing out something but is correct. please can someone help me out to know what am doing wrong here

import { createContext, useState } from "react"

const TodosContext = createContext()

const TodosProvider = ({children}) =>  {

    const [todos, setTodos] = useState([])

    const updatedTodos = async (updateTodo) => {

        try{
            const res = await fetch("/api/updateTodo", {
                method: "PUT",
                body: JSON.stringify(updateTodo),
                headers: {"content-[type]": "application/json"}
            })
            await  res.json()
            setTodos((prevTodo) => {
                const existingTodos = [...prevTodo]
                const existingTodo = existingTodos.find((todo) => todo.id === updateTodo.id)
                existingTodo.fields === updateTodo.fields

                return existingTodos
            })
        } catch(err){
            console.error(err)
        }
    }
  
    return (
        <TodosContext.Provider value={{
            addTodos,
            todos,
            setTodos,
            updatedTodos
        }}
        >
            {children}
        </TodosContext.Provider>
    )
}

export {TodosContext, TodosProvider}

import {TodosContext} from '../context/todoContext'
import { useContext } from "react"


export default function Todo ({todo}){
    const {updatedTodos} = useContext(TodosContext)


    const handleToggle = () => {
        
        const updateFields = {
            ...todo.fields,
            completed: !todo.fields.completed
        }
        const updateTodo = {id: todo.id, fields: updateFields} 
        updatedTodos(updateTodo)
    }

    return (
        <li className="flex items-center py-4 px-4 my-2 bg-white shadow-xl">
            <input type="checkbox" name="completed" id="completed" className="form-checkbox cursor-pointer mr-2 h-5 w-5" checked={todo.fields.completed}
            onChange={handleToggle}
            />
            <p className={`flex-1 text-gray-800 font-semibold ${todo.fields.completed? "line-through" : ""}`}>{todo.fields.description}</p>
        </li>
    )
}
Emmanuel uzoezie
  • 433
  • 1
  • 5
  • 18
  • Does this answer your question? [POST Request with Fetch API?](https://stackoverflow.com/questions/39565706/post-request-with-fetch-api) – Phil May 10 '22 at 05:06
  • No, my headers was invalid, used {"content-[type]": "application/json"} instead of {"Content-Type": "application/json"}, – Emmanuel uzoezie May 10 '22 at 10:07

1 Answers1

2

I think your header is invalid headers: {"content-[type]": "application/json"} should be {"Content-Type": "application/json"}, this is causing the error

karthik rao
  • 121
  • 5