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

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.

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

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.

• javascript
• reactjs

• You can create prop onChange with function in your child ponent, the handler will update parent ponent and called in child ponent. – jcubic Commented Jun 4, 2019 at 9:15
• e.target.name.value doesn't refer to the name input. You have to use refs for that or, as jcubic says, use the onChange handler and e.target.value for each prop – Cody Swann Commented Jun 4, 2019 at 9:21
• @Hafsa, your ponent should work as expected as long as you use an onSubmit listener on the form tag. See my answer below for more details. – Cat_Enthusiast Commented Jun 4, 2019 at 9:30
• Thanks jcubic and Cody Swan. I will try it. – Hafsa Mushtaq Commented Jun 4, 2019 at 9:34

2 Answers 2

You ponent 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 ponent 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;

To get an element in React you can use refs on each input or one on the form https://reactjs/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)} />