1. Зачем вам нужен тут Context? Добавьте useState со списком задач в main компонент и передавайте их в дочерние компоненты:
export function MainNode() {
const [tasks, setTasks] = useState(predefinedTasks)
const addTask = (listName, task) => {
// ..
// setTasks
// ..
}
const removeTask = (listNaem, taskId) => {
// ...
// setTasks
// ..
}
const moveTask = (fromListName, toListName, taskId) => {
// ..
// setTasks
// ..
}
return (
<main>
<TasksContainer type="Backlog" tasks={tasks.backlog} addTask={addTask}/>
<TasksContainer type="Ready" ... />
<TasksContainer type="InProgress" ... />
<TasksContainer type="Finished" ... />
</main>
)
}
2. Если вам необходимо по каким-то причинам использовать context, то по аналогии с примером выше:
export const TaskContext = createContext();
export const TaskProvider = ({ children }) => {
const [tasks, setTasks] = useState(predefinedTasks)
const addTask = (listName, task) => {
// ..
// setTasks
// ..
}
const removeTask = (listNaem, taskId) => {
// ...
// setTasks
// ..
}
const moveTask = (fromListName, toListName, taskId) => {
// ..
// setTasks
// ..
}
return (
<TaskContext.Provider value={{ tasks, moveTask, addTask }}>
{children}
</TaskContext.Provider>
);
}
После чего используйте:
const TaskList = ({ listName }) => {
const { tasks, moveTask, addTask } = useContext(TaskContext);
// ....
}
Вам надо почитать как работает реактивность в React и разобраться почему изменения в объекте не триггерят рирендер компонента. Если по простому, то Вам нужно не просто добавлять (push) новый task в список, а полностью заменять весь объект (data) с тасками и не использовать для каждого компонента свой useState
// так не работет
tasks.backlog.push(...)
// так работает
const tasks = {....} // объект с задачами
const updatedTasks = { // создаем новый объект с задачами
...tasks,
[listName]: [...tasks[listName], newTask]
};
setTasks(updatedTasks) // обновляем состояние