{/*I'm trying to pass a function two levels deep and it doesnt seem to be working (this is in react.js)*/}
{/*note these are snippets of the code to give an idea - below wont compile as is*/}

{/* ++++++++++++++++++++Grandparent function++++++++++++++++++++*/}

  handleLogIn(username, password){
    let setusername = this.state.username;
    let setpassword = this.state.password;

    {/*call to the backend and bcrypt goes here*/}

    this.setState({
      username:setusername,
      password:setpassword
    });

    let updatedusername = this.state.username;
    let updatedpassword = this.state.password;


    console.log('username: ', updatedusername, ' password: ',  updatedpassword);
  }



  render() {

    const xProfilePagex = () => {
      return(
        <div>
          <ProfilePage handleLogIn={this.handleLogIn.bind(this)}/>

{/*++++++++++++++++++++Parent function++++++++++++++++++++*/}

    this.state = {
      handleLogIn: this.props.handleLogIn,
      username: this.props.username,
      password: this.props.password
    }
  }

  render() {
          return (
            <div>
              <h1>ProfilePage</h1>
              <LogIn handleLogIn={this.state.handleLogIn.bind(this)}/>

{/*++++++++++++++++++++Child function++++++++++++++++++++*/}


  constructor(props){
    super(props);
    this.state = {
      username: this.props.username,
      password: this.props.password
    }
  }


  handleLogIn(e){
    e.preventDefault();
    this.props.handleLogIn(this.state.username, this.state.password);

    console.log('inside login. username: ', this.state.username, ' password: ', this.state.password);

  }


  render() {
          return (
            <div>
              <p>LogIn</p>
              <form name="log-in" id="log-in">

                <input
                onChange={(e)=>this.setState({username: e.target.value })}
                type="text"
                name="question"
                id="question"
                placeholder="username"/>

                <input
                onChange={(e)=>this.setState({password: e.target.value })}
                type="text"
                name="question"
                id="question"
                placeholder="password"/>

                <button onClick={(e)=>this.handleLogIn(e)}>Log In</button>

              </form>


{/* I can pass the form to the console log in the child function, but it doesn't bubble up to the grandparent. Please help.*/}