context overview

context.txt

UserContext.js
 -define the user context

const UserContext = React.createContext({
    name: 'Joe',
    setName: () => {}
});

--

App.js
  -import user context
  -within your render - set the values from state
  
  <UserContext.Provider value={{
    name: this.state.name,
    setName: name => this.setState({name})
  }}>
    <Child />
  </UserContext.Provider>


class Component
Some Distant Child Component
 -import user context file
 -set static ContextType = UserContext;
 -now can call this.context.somePropName

stateless Component
  -import user context file
  -Inside return, return JSX from UserContext

  <UserContext.Consumer>
    {({name, setName}) => (
        <div className="user" onClick={() => setName('Chris')}>
            {name}
        </div>
    )}
  </UserContext.Consumer>