El error aparece cuando paso el mouse por {props.children}
qué esta subrayado en rojo y dice La propiedad 'children' no existe en el tipo '{}'
Código:
import React, { ReactNode, useState } from 'react';
import Todo from '../models/todo';
type TodosContextObj = {
items: Todo[];
addTodo: (text: string) => void;
removeTodo: (id: string) => void;
};
export const TodosContext = React.createContext<TodosContextObj>({
items: [],
addTodo: () => {},
removeTodo: (id: string) => {},
});
const TodosContextProvider: React.FC = props => {
const [todos, setTodos] = useState<Todo[]>([]);
const addTodoHandler = (todoText: string) => {
const newTodo = new Todo(todoText);
setTodos(prevTodos => {
return prevTodos.concat(newTodo);
});
};
const removeTodoHandler = (todoId: string) => {
setTodos(prevTodos => {
return prevTodos.filter(todo => todo.id !== todoId);
});
};
const contextValue: TodosContextObj = {
items: todos,
addTodo: addTodoHandler,
removeTodo: removeTodoHandler,
};
return (
<TodosContext.Provider value={contextValue}>
{props.children}
</TodosContext.Provider>
);
};
export default TodosContextProvider;