not able to pass value to parent component react

Question

I am not able to pass the value from the child to parent component. I am new to react please guide me.

This is Greeting component -

/* eslint-disable react/prop-types */
import React from "react";
const Greeting = props => {
  const isLoggedIn = props.isLoggedIn;
  const name = props.name;

  if (isLoggedIn) {
    return <h1> Welcome Back {name}</h1>;
  } else {
    return <LoginInfo name={name} onChange={props.onChange} />;
  }
};

function LoginInfo(props) {
  return (
    <div>
      <h1> Please Login</h1>
      <input type="text" value={props.name} onChange={props.onChange} />
    </div>
  );
}

export default Greeting;

This is login component -

import React, { Component } from "react";
import Greeting from "./Greeting";
import LogoutButton from "./LogoutButton";
import LoginButton from "./LoginButton";

class Login extends Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {
      isLoggedIn: false,
      name: ""
    };
  }

  handleLoginClick() {
    this.setState({ isLoggedIn: true });
  }
  handleLogoutClick() {
    this.setState({ isLoggedIn: false });
  }
  onChange = e => {
    this.setState({
      name: e.target.value
    });
  };

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    const name = this.state.name;

    let button;

    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting
          isLoggedIn={isLoggedIn}
          name={name}
          onChange={this.onChange}
        />
        {button}
      </div>
    );
  }
}

export default Login;

I am using in my app.

<Login />

In greeting component How whatever user entered i can store in state and display in welcome back line with name.

Answer 1

I think you need to maintain state in your parent component and emit change event from child component and change state in parent. like

In login component

nameChange = (e) => {
        this.setState({
          name: e.target.value
        })
    }

 <Greeting isLoggedIn={isLoggedIn} name={this.state.name} nameChange={this.nameChange}/>

and in child

<input
        type="text"
        name="name"
        value={this.props.name}
        onChange={this.props.nameChange}
      />

Answer 2

So this is how I would refactor your code for the LogInInfo component to pass the values of the user to your LogIn component

First of all you need a state in LogInInfo since you want to store the values of the user, you will use the state for that

/* eslint-disable react/prop-types */
import React from "react";
const Greeting = props => {
  const isLoggedIn = props.isLoggedIn;

  if (isLoggedIn) {
    return <h1> Welcome Back</h1>;
  } else {
    return <LoginInfo submitForm={props.handleSubmitForm}/>;
  }
};

class LoginInfo extends React.Component {
  constructor(props) {
    this.state = {
      name: ""
    }
  }

  handleChange = (event) => {
    this.setState({ name: event.target.value })
  }
  render(){
    return (
      <div>
        <h1> Please Login</h1>
        // e is the event that is passed automatically to the function in onSubmit
        <form onSubmit={e => this.props.submitForm(e, this.state.name)}>
          <input
            type="text"
            name="name"
            value={name}
            onChange={this.handleChange}
          />
          <input type="submit" />
        </form>
      </div>
    );
  }
}

export default Greeting;

At this point you have the value you want to pass to the parent component LogIn to pass this value up, you need a function in your parent component that would get this value for you and pass it to the child component so it can be used, we will do this via props. We also need a variable in the parent's state that will store this value

import React, { Component } from "react";
import Greeting from "./Greeting";
import LogoutButton from "./LogoutButton";
import LoginButton from "./LoginButton";

class Login extends Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {
      isLoggedIn: false,
      username: ""
    };
  }

  handleLoginClick() {
    this.setState({ isLoggedIn: true });
  }
  handleLogoutClick() {
    this.setState({ isLoggedIn: false });
  }
  // when you use arrow functions they automatically bind to your component

  handleSubmitForm = (e, value) => {
    // the following line prevents the page from refreshing when you submit any form
    e.preventDefault()
    this.setState({ username: value })
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} submitForm={this.submitForm}/>
        {button}
      </div>
    );
  }
}

export default Login;

when you click the submit button it should update the state in the LogIn component. Hope this helps

Answer 3

You need to do 2 things:

1. create a function which will handle changes of the input in Login component, send it to Greeting and then to LoginInfo. the function would look something like:
   onChange = (event) => this.setState({event.target.name: event.target.value})
   note: event.target.name equals to name prop of input. the function above will work only if the name of the state that stores that input value equals to the input name, in your case name .

2. send the state that stores the value of the input to the LoginInfo. the input element should look like this:
   <input type="text" name="name" value={valueFromLogin} onChange={props.onChangeFromLogin} />