React Context API

import { useContext } from 'react';

const ChildComponent = () => {
  const contextData = useContext(MyContext);
  return <div>Name: {contextData.name}, Age: {contextData.age}</div>;
};

// TodoContext.js
import React, {createContext, useState} from "react";
const TodoContext = createContext();
const TodoProvider = ({children}) => {
    const [todos, setTodos] = useState([]);
    const addTodo = (text) => {
        setTodos([...todos, { text, id: Date.now() }]);
    };
    const removeTodo = (id) => {
        setTodos(todos.filter((todo) => todo.id !== id));
    };
    return (
        <TodoContext.Provider value={{
            todos,
            addTodo, removeTodo
        }}>
            {children}
        </TodoContext.Provider>
    );
};
export { TodoProvider, TodoContext };

// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import {TodoProvider} from "./TodoContext";
ReactDOM.render(<React.StrictMode><TodoProvider><App />
                </TodoProvider>
  </React.StrictMode>,
                document.getElementById("root"));

// TodoForm.js
import React, {useContext, useState} from "react";

import {TodoContext} from "./TodoContext";

const TodoForm = () => {
    const {addTodo} = useContext(TodoContext);
    const [text, setText] = useState("");
    const handleSubmit = (e) => {
        e.preventDefault();
        addTodo(text);
        setText("");
    };
    return (
        <form onSubmit={handleSubmit}>
            <input
    type = "text"
                value={text}
                onChange={(e) => setText(e.target.value)}
                placeholder="Add a new todo"
            />
            <button type="submit">Add Todo</button>
        </form>
    );
};
export default TodoForm;

// TodoList.js
import React, {useContext} from "react";
import {TodoContext} from "./TodoContext";
const TodoList = () => {
    const { todos, removeTodo } = useContext(TodoContext);
    return (
        <ul>
            {todos.map((todo) => (
                <li key={todo.id}>
                    {todo.text}
                    <button onClick={() =>
                        removeTodo(todo.id)}>Remove</button>
                </li>
            ))}
        </ul>
    );
};
export default TodoList;

// App.js
import React from "react";
import TodoForm from "./TodoForm";
import TodoList from "./TodoList";

const App = () => {
  return (
    <div>
      <h1>My Todo List</h1>
      <TodoForm />
      <TodoList />
    </div>
  );
};
export default App;