How to pass form values from child component to parent in react

Question

I am new to react and I am trying to pass the values inside a form to the parent component and then display the values in other child component.

I tried using states and props but it seems like I am missing something. It tells me that you are trying to use props on undefined value. I am not able to figure out where. I tried googling and did some search. nothing works as of now.

Here is my code:

Parent :

constructor(props) {
    super(props);

    this.state = {
      name: "",
      age:"",
      gender:""
    };
  }

  changeValue(name,age,gender) {
    this.setState({
      name: name,
      age:age,
      gender:gender
    });
  }

  render() {
    return (
      <div>
        <FormView changeValue={this.changeValue.bind(this)}/>
        <DisplayView name={this.state.name} age= {this.state.age} gender= {this.state.gender}/>
      </div>
    );
  }

Child 1 :

constructor(props) {
        super(props);
      }

      handleChange(e){
        this.props.changeValue(e.target.name.value,e.target.age.value,e.target.gender.value);
      }

  render() {

    return <form>
        <label>
        Name:
        <input type="text" name="name"  />
        </label>
        <label>
        Age:
        <input type="number" name="age"   />
        </label>
        <label>
        Gender:
        <select name="gender" >
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
        </label>
        <input type="button" value="Submit" onClick = {this.handleChange.bind(this)} />
   </form>

  }

Child2 :

 render(){
        return (
          <div>
             <p>{this.props.name}</p> 
             <p>{this.props.age}</p>
             <p>{this.props.gender}</p>
          </div>
        )
      }

I am expecting to display the form values of child1 in child2.

I am getting an undefined value error.

Answer 1

You component works fine if we define an onSubmit listener and handler for the form. We also need to call event.preventDefault() to stop the page from refreshing, that way the values actually get passed up to parent component when you call this.props.changeValue()

See codesandbox: https://codesandbox.io/s/gallant-ellis-76bdv

import React from "react";

class FormView extends React.Component {
  constructor(props) {
    super(props);
  }

  handleChange(e){
    e.preventDefault()
    this.props.changeValue(
      e.target.name.value,
      e.target.age.value,
      e.target.gender.value
    );
  };

  render() {
    return (
      <form onSubmit={this.handleChange.bind(this)}>
        <label>
          Name:
          <input type="text" name="name" />
        </label>
        <label>
          Age:
          <input type="number" name="age" />
        </label>
        <label>
          Gender:
          <select name="gender">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default FormView;

Answer 2

To get an element in React you can use refs on each input or one on the form https://reactjs.org/docs/refs-and-the-dom.html

constructor(props) {
    super(props);
  }

  handleChange(e){
    console.log(this.name.value, this.age.value, this.gender.value);
    this.props.changeValue(this.name.value, this.age.value, this.gender.value);
  }

setName = (name) => {
   this.name = name;
}

setAge = (age) => {
   this.age = age;
}

setGender = (gender) => {
   this.gender = gender;
}

render() {

return <form>
    <label>
    Name:
    <input type="text" ref={this.setName} name="name"  />
    </label>
    <label>
    Age:
    <input type="number" ref={this.setAge} name="age"   />
    </label>
    <label>
    Gender:
    <select ref={this.setGender} name="gender" >
        <option value="Male">Male</option>
        <option value="Female">Female</option>
    </select>
    </label>
    <input type="button" value="Submit" onClick = {this.handleChange.bind(this)} />