Just for a Medium post

Child.js

import React, { Component } from 'react';
import {MainContext} from './Context';

class Child extends Component {

  happy = main => main.onChangeStatus("happy :D")
  sad = main => main.onChangeStatus("sad :(")

  render() {
    return (
    	<MainContext.Consumer>
		    {main => <div>
		      <button onClick={() => this.happy(main)}>Happy</button>
		      <button onClick={() => this.sad(main)}>Sad</button>
		    </div>}
		</MainContext.Consumer>
    );
  }
}

export default Child;

Context.js

import React from 'react';

export const MainContext = React.createContext('main');

Grandparent.js

import React, { Component } from 'react';
import Parent from './Parent';
import {MainContext} from './Context';

class Grandparent extends Component {
  state = {status: "..."};

  handleChangeStatus = (status) => this.setState({status});

  render() {
  	let {status} = this.state;
    return (
      <MainContext.Provider value={{onChangeStatus: this.handleChangeStatus}}>
        I am {status}
        <Parent />
      </MainContext.Provider>
    );
  }
}

export default Grandparent;

Parent.js

import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  render() {
    return (
      <Child /> 
    );
  }
}

export default Parent;