Voici votre URL de partage https://sharemycode.io/c/573abd7 (Cliquer pour copier) (Copié)

import React, { useState, useContext, createContext } from 'react';

const TodoContext = createContext();

const TodoList = () => {
    const [todos, setTodos] = useState([]);

    const addTodo = (newTodo) => {
        setTodos([...todos, newTodo]);
      };
  return (
    <TodoContext.Provider value={{ todos, addTodo }}>
      <div>
        <h1>Todolist</h1>
        <FormTodo />
        <Todos />
      </div>
    </TodoContext.Provider>
  );
}

export default TodoList;






import React from 'react';

const FormTodo = () => {
   
        const { addTodo } = useContext(TodoContext);
        const [newTodo, setNewTodo] = useState('');
      
       
        const handleSubmit = (e) => {
          e.preventDefault();
          addTodo(newTodo);
          setNewTodo('');
        };
      
        return (
          <form onSubmit={handleSubmit}>
            <input
              type="text"
              value={newTodo}
              onChange={(e) => setNewTodo(e.target.value)}
              placeholder="Ajouter une tâche"
              required
            />
            <button type="submit">Ajouter</button>
          </form>
        );
}

export default FormTodo;




import React from 'react';

const Todos = () => {
    const { todos } = useContext(TodoContext);
  return (
    <div>
      <ul>
      {todos.map((todo, index) => (
        <Todo key={index} todo={todo} />
      ))}
    </ul>
    </div>
  );
}

export default Todos;



import React from 'react';

const Todo = ({todo}) => {
  return (
    <div>
       return <li>{todo}</li>;
    </div>
  );
}

export default Todo;