How To Use React's Context Api Outside Of React's Component Scope : Reactjs

I am using react's context API for storing USER_TOKEN for authentication purposes. Also I am maintaining a common fetch function in a separate module where I want to use this USER

Solution 1:

• create a folder named: Context in the src/components folder
• in this folder that you have created (Context ) create a file named index.js
• in the index.js file write:

importReact, { Component } from'react';

constAppContext = React.createContext();

exportclassProviderextendsComponent {


  state = {
    
      token: ''
    
  };
  
  setToken = (token) => {
  
    this.state.token = token;
    this.setState();
  
  };
  
  render() {
  
    return (
      
        <AppContext.Providervalue = {{token:this.state.token,
                actions: {
                  setToken:this.setToken
                }

        }}>
    
        {this.props.children}
      </AppContext.Provider>
  
      );
    
  
  }

}

exoprt constConsumer = AppContext.Consumer;
exportconstAppContextObject = AppContext;

• in the src/index.js:

importReactfrom'react';
importReactDOM from'react-dom';
import { Provider } from"./compomemts/Context/";
importAppfrom'./App';

ReactDOM.render(
    <Provider><App  /></Provider>
    , document.getElementById("root")
);

• let's say you have login component, in it write down:

importReact, { PureComponent } from'react';
import { Consumer, AppContextObject } from"../Context";

classLoginextendsPureComponent { 



render() {

  return (
  
    <Consumer>
      {(actions, token) => (
      
        <buttonclassName="enter"id="enter-id"onClick={(event) => {
          if(token === undifined) {
            newToken = 'get the token from your system';
            actions.setToken(newToken);
          }
          
        }} >
                                connect
                            </button>
      
      )}
    </Consumer>

  )

}



}

Login.contextType = AppContextObject; // This part is important to access context values

SuperAdminContextObject