title: React | pass form data from one component to another
body: <p>I am developing a small React app, I'm having Files like</p>
  
  <pre><code>--Filter.js
  --Result.js
  --Index.js
  </code></pre>
  
  <p><strong>Filter.js</strong> - Contains 2 textbox and button</p>
  
  <p><strong>Result.js</strong> - It contains the Filter.js and one P tag. </p>
  
  <p><strong>Index.js</strong> - Contains the Result.js</p>
  
  <p>Filter.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { render } from 'react-dom';
  
  export default class Filter extends Component {
    constructor(props){
      super(props);
      this.state={myName: ""}
  }   
  
    SubmitValue = (e) =&gt; {
       this.props.handleData(this.state.myName)
    }
  
     onChange=(e)=&gt;{
  this.setState({myName: e.target.value})
  
     } 
  
    render() {
      return (
          &lt;div&gt;
          &lt;form&gt;
            Name: &lt;input type="text" name="myName" onChange={this.onChange}/&gt;
            &lt;br /&gt;
            Email: &lt;input type="text" name="myEmail" /&gt;
            &lt;br /&gt;&lt;br /&gt;
            &lt;input type="button" value="Submit" onClick={this.SubmitValue}/&gt;
            &lt;/form&gt;
          &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>ResultList.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { render } from 'react-dom';
  import Filter from './Filter';
  
  import { Button, Dropdown, Input, } from 'semantic-ui-react';
  
  export default class ResultList extends Component {
     constructor(props){
        super(props);
        this.state = {
            myName: ''
        };
      }
  
       handleParentData = (e) =&gt; {
  this.setState({myName: e})
    }
  
    render() {
      return (
          &lt;div&gt;
  
          &lt;Filter handleData={this.handleParentData}/&gt;
   &lt;p&gt;{this.state.myName}&lt;/p&gt;       
  
          &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Index.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { render } from 'react-dom';
  import Hello from './Hello';
  import './style.css';
  import ResultList from './Components/ResultList';
  class App extends Component {
  
    render() {
      return (
        &lt;div&gt;
          &lt;ResultList /&gt;
         &lt;/div&gt;
      );
    }
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>I want the Filter.js textbox values in Result.js. I can able to get one text field value to Result.js. But unable to get the both text fields values.
  Code link: <a href="https://stackblitz.com/edit/dhanapal-react-ex-1" rel="nofollow noreferrer">https://stackblitz.com/edit/dhanapal-react-ex-1</a></p>
  
  <p>How to get the both text field values in Result.js?</p>