i want to create todo app using react i use the useContext hook but i get the following problem
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
import { useState } from 'react'
import TodoStore from './Hooks/TodoStore'
import './App.css'
import TodosForm from './Component/TodosForm'
import Tasks from './Component/Tasks'
function App() {
const [todolist,setTodoList]=useState([]);
const fillTodoList=(todo)=>{
setTodoList([todo,...todolist])
}
return (
<TodoStore.Provider value={setTodoList}>
<TodosForm fillTodoList={fillTodoList} />
<Tasks alltasks={todolist} setList={setTodoList}/>
</TodoStore.Provider>
)
}
export default App
import React from 'react'
import Completed from '../Operations/Completed'
import deleteTask from '../Operations/deleteTask'
function Tasks(props) {
return (
<div>
{
props.alltasks.map((item)=><div key={item.id}>
<span onClick={()=>Completed(item.id,props.alltasks)}>{item.text}</span>
<button onClick={()=>deleteTask(item.id,props.alltasks)}>X</button>
</div>)
}
</div>
)
}
export default Tasks
import { useContext } from "react"
import TodoStore from "../Hooks/TodoStore"
const deleteTask=(id,alltasks)=>{
const {setList}=useContext(TodoStore);
const result=alltasks.filter((item)=>item.id!=id)
setList([...result])
}
export default deleteTask