React context provides data to components no matter how deep they are in the components tree. The context is used to manage global data, e.g. global state, theme, services, user settings, and more.

Create an instance of context
 you can use createContext to create an instance of context. createContext takes context as an argument and returns an instance of the context. Context is an object whose value property holds the data you want to pass.

import React, { createContext } from "react";

const TaskContext = createContext();

useContext hook
 useContext hook takes a context object (object returned by React.CreateContext) as an argument and returns the object passed via value prop of Context.Provider. The current context value is determined by the value prop of the nearest Context.Provider in the component tree in case a component has multiple ancestors dispatching data via Context.Provider.

export const TaskManager = () => useContext(TaskContext)

Wrap children of parent component (provider of data) inside context.Provider

TaskContext has a Provider property which can be used inside component which provides data by wrapping siblings of the parent component in it. To illustrate this, let us go back to the previous example. If you want to pass data from App component down the component tree to any of the descendant components, then App is the provider of the data and is a parent to the components below it in the component tree. Simply wrap children of App inside context.Provider.

const TaskProvider = ({ children }) => {

    const [task, setTask] = useState(['Apple', 'Banana', 'Guava'])

    const AddItem = (item) => {

        setTask(

            [

                ...task,

                item

            ]

        )

    }

    return (

        <TaskContext.Provider value={{ task, AddItem }}>

            {children}

        </TaskContext.Provider>

    )

}

export default TaskProvider;

Wrap this Context in App.jsx

import React from 'react'

import TaskProvider from './context/TaskProvider'

import Task from './Task'

const App = () => {

  return (

    <TaskProvider>

      <div>App</div>

      <Task />

    </TaskProvider>

  )

}

export default App

Now you can use this Context in Your React Application. I created a component Task.jsx and used Context

import React, { useState } from 'react'

import { TaskManager } from './context/TaskProvider'

const Task = () => {

    const [text, setText] = useState('')

    const { task, AddItem } = TaskManager();

    const btnHandler = () => {

        AddItem(text)

        setText('')

    }

    return (

        <div>Task

            <input type='text' value={text} onChange={(e) => setText(e.target.value)} />

            <button onClick={btnHandler}>Add Item</button>

            <ul>

                {

                    task.map((item, index) => {

                        return <li key={index}>{item}</li>

                    })

                }

            </ul>

        </div>

    )

}

export default Task

Here is Context Complete Code

import { useState } from "react";

import { createContext, useContext } from "react";

const TaskContext = createContext()

export const TaskManager = () => useContext(TaskContext)

const TaskProvider = ({ children }) => {

    const [task, setTask] = useState(['Apple', 'Banana', 'Guava'])

    const AddItem = (item) => {

        setTask(

            [

                ...task,

                item

            ]

        )

    }

    return (

        <TaskContext.Provider value={{ task, AddItem }}>

            {children}

        </TaskContext.Provider>

    )

}

export default TaskProvider;