Cacher is the code snippet organizer for pro developers

import React from "react";

const authContext = React.createContext({
  authenticated: false,
  login: () => {}
});

export default authContext;

import AuthContext from "../contex/auth-context";

   return (
      <Aux classes={classes.App}>
        <button
          onClick={() => {
            this.setState({ showCockpit: false });
          }}
        >
          Remove Cockpit
        </button>
        
        
        <AuthContext.Provider
          value={{
            authenticated: this.state.authenticated,
            login: this.loginHandler
          }}
        >
          {this.state.showCockpit ? (
            <Cockpit
              showPersons={this.state.showPersons}
              personsLength={this.state.persons.length}
              clicked={this.togglePersonsHandler}
              title={this.props.title}
            />
          ) : null}
          {persons}
        </AuthContext.Provider>
        
        
        
      </Aux>
    );
  }
}

import AuthContext from "../../../contex/auth-context";

  render() {
    console.log("[Person.js] rendering...");

    return (
      <Aux>
        <AuthContext.Consumer>
          {context =>
            context.authenticated ? <p>Authenticated!</p> : <p>Please log in</p>
          }
        </AuthContext.Consumer>

        <p onClick={this.props.click}>
          I'm a <b>{this.props.name}</b> and am {this.props.age} years old !
        </p>
        <p>{this.props.children}</p>
        <input
          type="text"
          //ref={inputEl => {
          //  this.inputElementRef = inputEl;
          //}}
          ref={this.inputElementRef}
          onChange={this.props.changed}
          value={this.props.name}
        />
      </Aux>
    );
  }
  
  //update
  // new feature 
    static contextType = AuthContext; // connect this component to the context, exact names vars
  // this.context
  
    componentDidMount() {
    //this.inputElement.focus();
    this.inputElementRef.current.focus();
    console.log(this.context.authenticated);
  }
  
  
    return (
      <Aux>
        {this.context.authenticated ? (
          <p>Authenticated!</p>
        ) : (
          <p>Please log in</p>
        )}

        <p onClick={this.props.click}>
          I'm a <b>{this.props.name}</b> and am {this.props.age} years old !
        </p>
        <p>{this.props.children}</p>
        <input
          type="text"
          //ref={inputEl => {
          //  this.inputElementRef = inputEl;
          //}}
          ref={this.inputElementRef}
          onChange={this.props.changed}
          value={this.props.name}
        />
      </Aux>
    );

import AuthContext from "../../contex/auth-context";

  return (
    <div className={classes.Cockpit}>
      <h1>{props.title}</h1>
      <p className={assigned_classes.join(" ")}>This is working</p>

      <button
        ref={toggleBtnRef}
        className={btnClass.join(" ")}
        alt={props.showPersons.toString()}
        onClick={props.clicked}
      >
        Toggle Persons
      </button>
      <AuthContext.Consumer>
        {context => <button onClick={context.login}>Log in</button>}
      </AuthContext.Consumer>
    </div>
  );