ReactJS - pass input values from child to parent

Question

child component

import React, { Component } from 'react'

export default class Login extends Component {
  constructor (props) {
    super(props);
    this.state = {Id: '',name: '',gender: ''};

    this.show = this.show.bind(this);
  }

  show (event) {
    if (this.state.Id === "123456" && this.state.name !== '' && this.state.gender !== '') {
      this.props.show();

      alert('you are login');
      console.log('A ID was submitted: ' + this.state.Id);
      console.log('A Name was submitted: ' + this.state.name);
      console.log('A Gender was submitted: ' + this.state.gender);
    } else {
      alert('Please enter your valid id,Your Name & Gender');
    }

    event.preventDefault();
  }

  render () {
    return (
      <div className="login">
        <form onSubmit={ this.show.bind(this) }>
          <div>
            <label>Your ID:</label>
            <input type="text" onChange={ event => this.setState({ Id: event.target.value }) } placeholder="Enter your ID" />
          </div>
          <br />

          <div>
            <label>Your Name:</label>
            <input type="text" onChange={ event => this.setState({ name: event.target.value }) } placeholder="Enter your Name" />
          </div>

          <br />
          <div>
            <label>Your Gender:</label>
            <label>Female:</label>
            <input type="radio" name="gender" value="Female" onChange=
              { event => this.setState({ gender: event.target.value }) } />
            <label>Male:</label>
            <input type="radio" name="gender" value="Female" onChange={ event => this.setState({ gender: event.target.value }) } />
          </div>
          <input type="submit" value="Submit" onClick={ this.props.comingvalue } />
        </form>
      </div>
    )
  }
}

parent component

class App extends Component {
  constructor (props) {
    super(props);

    this.state = { Id: '', name: '', gender: '' };
  }

  getvalue () {
    console.log('getting values as props');
    this.setState({ Id: this.state.Id });
    this.setState({ name: this.state.name });
    this.setState({ gender: this.state.gender });
  }

  render () {
    return (
      <div className="App">
        <Login comingvalue={ this.getvalue } />
        <button type="button" className="btn btn-primary" onClick=
          { this.handleLogin }>Sign In</button>
      </div>
    );
  }
}

export default App;

now here is the my question i want that when i enter value in my child component i get those values in parent compnent how i can get this please help..'i thing you peeple should know that i cut alot of code from above code there is possibilty of any other error but i want to know only one thing which i mention above i want child coponents value in parent component.. please suggest me right solution..thanks

Answer 1

Just a pointer for future posts: the less code the better and please, for the love of God, make sure the formatting is correct.

A standard pattern in React for passing information back up the tree is to pass children a callback as a prop.

parent

class Parent extends React.Component {
  onChildCallback = (data) => {
    alert(data)
  }

  render() {
    return (
      <div>
        ...
        <Child onAction={this.onChildCallback}/>
      </div>
    )
  }
}

child

class Child extends React.Component {
  render() {
    return (
      <button onClick={() => this.props.onAction('hello from the child')}>
        Click Me!
      </button>
    )
  }
} 

this is, of course, simplified, but you can extend it however you like. Some things to watch out for:

• make sure you're either binding the callback in the parent or using arrow functions (in this case, I'm using a ES7 class property)
• if you need data from a child of a child, you need to chain these... you can get away with using context, but ... don't. Just don't.