How to use React Context

React-context.md

Context

Better to create the Context instance in a seperate file.

//MyContext.js

import {React} from 'react';

const MyContext = React.createContext({});
export const MyContextProvider = MyContext.Provider;

export default MyContext;

Passing a context value with Provider

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


import { MyContextProvider } from './MyContext';

ReactDOM.render(
  <MyContextProvider value={{ name: 'Shehan' }}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </MyContextProvider>,
  document.getElementById('root')
);

Referencing Context in a functional component

//App.js

import React from 'react';
import NameContext from './NameContext';


function App(props) {
  return (
    <NameContext.Consumer>
      {({ name }) => (
        <div className="App">
          <p>{name}</p> 
        </div>
      )}
    </NameContext.Consumer>
  );
}

export default App;

Referencing Context in a Class component

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

export default class reactAuth0Spa extends Component {
  render() {
    return <p>Context Name : {this.context.name}</p>;
  }
}

reactAuth0Spa.contextType = MyContext;