text: import React, {Component} from "react";
  import PropTypes from "prop-types";
  
  import classes from "./Person.css";
  
  import { AuthContext } from "../../../containers/App"
  
  class Person extends Component {
    constructor(props) {
      super(props);
      console.log("[Person.js] Inside Constructor", props)
      this.inputElement = React.createRef()
    }
  
    componentWillMount(){
      console.log("[Person.js] Inside componentWillMount()")
    }
  
    componentDidMount() {
      console.log("[Person.js] Inside componentDidMount()")
      if (this.props.position === 0) {
        this.inputElement.current.focus();
      }
    }
  
    render() {
      console.log("[Person.js] Inside render()")
      return <div className={classes.Person}>
        <AuthContext.Consumer>
          {auth => auth ? <p>I'm authenticated</p> : null}
        </AuthContext.Consumer>
        <p onClick={this.props.click}>I'm {this.props.name} and I'm {this.props.age} years old!</p>
        <p>{this.props.children}</p>
        <input 
          ref={(inp) => {this.inputElement = inp}}
          type="text" 
          onChange={this.props.changed} 
          value={this.props.name} />
      </div>
    }
  }
  
  Person.propTypes = {
    click: PropTypes.func,
    name: PropTypes.string,
    age: PropTypes.number,
    changed: PropTypes.func
  }
  
  export default Person;