How to update React Context from inside a child component?

React Context is a powerful feature that allows us to share data across components without having to pass props through multiple levels. However, one common challenge that developers face is how to update React Context from inside a child component. In this blog post, we will explore two solutions to this problem.

Solution 1: Using useContext and useState Hooks

The useContext and useState hooks can be used together to update React Context from inside a child component. Here’s how you can do it:

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

// Create the context
const MyContext = React.createContext();

// Create a provider component
const MyProvider = ({ children }) => {
  const [data, setData] = useState('Initial data');

  const updateData = (newData) => {
    setData(newData);
  };

  return (
    
      {children}
    
  );
};

// Child component
const ChildComponent = () => {
  const { data, updateData } = useContext(MyContext);

  const handleClick = () => {
    updateData('New data');
  };

  return (
    

      Data: {data}
      Update Data
    
  );
};

// App component
const App = () => {
  return (
    
      
    
  );
};

export default App;

In this solution, we create a context using the createContext function. Then, we create a provider component that wraps the child components and provides the context value using the useState hook. The updateData function is used to update the context value.

Solution 2: Using a Higher-Order Component (HOC)

Another solution to update React Context from inside a child component is by using a Higher-Order Component (HOC). Here’s an example:

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

// Create the context
const MyContext = createContext();

// Higher-Order Component (HOC) to update context
const withContextUpdate = (WrappedComponent) => {
  return (props) => {
    const [data, setData] = useState('Initial data');

    const updateData = (newData) => {
      setData(newData);
    };

    return (
      
        
      
    );
  };
};

// Child component
const ChildComponent = () => {
  const { data, updateData } = useContext(MyContext);

  const handleClick = () => {
    updateData('New data');
  };

  return (
    

      Data: {data}
      Update Data
    
  );
};

// App component
const App = withContextUpdate(ChildComponent);

export default App;

In this solution, we define a Higher-Order Component (HOC) called withContextUpdate that wraps the child component. Inside the HOC, we create the context and provide the context value using the useState hook. The child component can then access the context value and update it using the updateData function.

These are two solutions to update React Context from inside a child component. Choose the one that best fits your project and enjoy the benefits of React Context!