Get data in React child component's to parent for submission

Question

I was just wondering how I can get form data when a user submits I want to be able to see it in the console.log Here is what my parent component looks like.

class App extends Component {

       render() {

         return (

      <div className="App">

      <PageOne /> 
      <PageTwo />
      <PageThree />
      <PageFour />
      <PageFive />
      <PageSix />

      <Button>
         Submit Form
      </Button>

      <br/>
      <br/>



      </div>

        );
      }
     }



Page One Component 



          class PageOne extends Component {
 
      constructor(props){
        super(props)
        this.state={
         generalDetails: '',
          phoneNumber: '',
         fName: '',
         mName: '',
         lName: '',
         gender: '',


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


      }


     handleInputChange(event) {
       const target = event.target;
       const value = target.type === 'checkbox' ? target.checked : 
     target.value;
       const name = target.name;


       console.log(`Input name ${name}. Input value ${value}.`);

       this.setState({
         [name]: value
       });
     }




       render() {
         return (
           <div className="PageOneWrapper"
              style={{
               background: '#969fad'
           }}


      >
      <div className="Details">

      <h1>CareerTrackers Program Orientation</h1>
      <p> Please complete this form to ensure we have your most up-to-date contact details. </p>

      <Form>
  <TextArea
  onChange={this.handleInputChange}
  name="generalDetails"
  placeholder='General Details'
   style={{
  width: 500,
  minHeight: 50
  }}
  />
  </Form>
<br/>

<p style={{
  marginRight: 600

        <Input
      onChange={this.handleInputChange}
      name='fName'
       placeholder='First Name'
            />








  <Input
      onChange={this.handleInputChange}
      name='mName'

       placeholder='Middle Name'
       style={{
         marginLeft: 50,
         marginRight: 50
       }}
       />


       <Input
       onChange={this.handleInputChange}
       name='lName'
       placeholder='Last Name'
       />

       <br/><br/><br/>

      <p
      style={{
        display: "inline",
        marginRight: 480
      }}
    ><strong>Gender: </strong>


     </p>
     <select
     name='gender'
     onChange={this.handleInputChange}
     style={{
       display: "inline",
     }}
     >
     <option>Select Gender </option>
     <option>Male </option>
     <option>Female </option>
     <option>Other </option>
     </select>



       <br/><br/><br/>


       <p style={{
         marginRight: 600

       }}><strong>Email:</strong></p>

       <Input
       onChange={this.handleInputChange}
            name='email'
            placeholder='Email'
            style={{
              marginRight: 470,

            }}
            />
            <br/>
            <br/>
       <Input
            onChange={this.handleInputChange}

            name='confirmEmail'
            placeholder='Confirm Email'
            style={{
              marginRight: 470,

            }}
            />

            <br/>
            <br/>

            <p style={{
              marginRight: 540


            }}><strong>Phone Number:</strong></p>




       <Input
            onChange={this.handleInputChange}
            name='phoneNumber'
            placeholder='Phone Number'
            style={{
              marginRight:370,
            }}
            />





            <select
            onChange={this.handleInputChange}
            name='Mobile Type'
            style={{
              MarginRight: 5000
            }}

            >
            <option>Mobile Type</option>
            <option>Mobile</option>
            <option>Work</option>
            <option>Home</option>

            </select>




            <br/>
            <br/>



<br/><br/><br/>



</div>
  </div>

          );
       }
     }
        export default PageOne;

Answer 1

In Parent Component Change code as mention below:

<PageOne />  should be <PageOne onDataChange={(content) => this.onContentChange(content)}/> 

And add onContentChange function in parent component like below:

onContentChange = (content) => {
   //Perform operation What you want to do with updated content
}

In Child Component Update code as mention below:

 Add below line of code at the end of handleInputChange function definition:

if(this.props.onDataChange){
  this.props.onDataChange(this.state); // You can pass limited data if you don't want to send all data to parent. What data need to sent is completely depends on your requirements.
}

Answer 2

const handleChange=(data)=>{console.log(data)}

Add this function to your parent component.

Pass this function to your child component like <PageOne handleChane={handleChange}/>

You can now access the function in your child component through props.

Call the function like onSubmit={this.props.handleChnage()} and pass the required data as parameter.

If you don't have a submit button in the child components, you need to define each of the onChange handle functions in your parent component and pass them to respective child components as previously mentioned. Then you get the value of form elements in your parent component.