So my question is a simple one. In React js I want to pass some states and handlers from a parent to its 3rd grandchild using Context. I have implemented this within the jsx but I want to use the states within the javascript o that I have some logic before I completely output my states. 
 I have divided my question into 2 parts. 1.) What I have done so far. 2.) What I want to do essentially.

1.) 

// this file just stores the Context
MyContext.js

```
import React, { Component } from 'react';
export const  MyContext = React.createContext();

```

MyProvider.js // this class is used by the parent and the child to have access to the provider

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

class MyProvider extends Component {
    state = {
      name: 'Wes',
      age: 100,
      cool: true
    }
    render() {
      return (
        <MyContext.Provider value={{
          state: this.state,
          growAYearOlder: () => this.setState({
            age: this.state.age + 1
          })
        }}>
          {this.props.children}
        </MyContext.Provider>
      )
    }
  }

  export default MyProvider;

```

// Ok so now I am basically skipping the parent and showing you the consumer grand-child

Person.js

```
import React, { Component } from 'react';
// first we will make a new context
import { MyContext } from '../MyContext';

class Person extends Component {
  render() {
    return (
      <div className="person">
        <MyContext.Consumer>
          {(context) => (
            <React.Fragment>
              <p>Age: {context.state.age}</p>
              <p>Name: {context.state.name}</p>
              <button onClick={context.growAYearOlder}></button>
            </React.Fragment>
          )}
        </MyContext.Consumer>
      </div>
    )
  }
}
export default Person;

```

2.)
// Ok so as you can see here I have had to immediately use the context.growAYearOlder. What I want to do instead is have control of it using javascript and modify it as desired; So something like this: 

Child.js

```
const parentContext = MyContext.getContext();
if(somethingHappens){ 
   parentContext().growAYearOlder();
}

return(
// The now rendered component
);

```

I tried something like this but it doesnt work:

```
  MyContext.Consumer.context.growAYearOlder();

```