Updating the Context from a nested component

It’s a common need to update the context from a child consumer component.

When a function stored in the context triggers an update and is fired from the child component, your application will re-render ALL of the nested components that depend on that data, ie. Child Components of the Provider.

We will simply need to invoke the function defined in our Provider which was stored in context and designed to update context.

Ex:

// src/components/ChildComponent.js
import React from 'react';
import SampleContext from '../contexts/SampleContext.js';

const ChildComponent = props => {
  handleClick = () => {
    e.preventDefault();
    props.handleEvent();
  }

  return (
    <div onClick={handleClick}>
      // Some JSX
    </div>
  )
}

const ChildComponentWithContext = () => {
  return (
    <SampleContext.Consumer>
      {(value) => <ChildComponent handleEvent={value.handleEvent} />}
    </SampleContext.Consumer>
  );
};



---------------------------------------------------------------



// src/components/MyComponent.js
import React from 'react';
import SampleContext from '../contexts/SampleContext.js';

const MyComponent = props => {
  return (
    <div>
      {props.relevant}
      <SomeChildComponent/>
    </div>
  )
};

class MyComponentWithContext extends React.Component {
  constructor(){
    super();
    this.state = {
      relevant: someValue,
      handleEvent: this.handleEvent,
    }
  }

  handleEvent = () => {
    // Logic to handle some event
    this.setState({ 
      // some Object 
    });
  }

  render() {
    return(
      <SampleContext.Provider 
        value = {
          this.state.relevant
          this.state.handleEvent
        }
      >
        <MyComponent relevant={this.state.relevant}/>
      </SampleContext.Provider>
    )
  }
}

export default MyComponentWithContext;