React | pass form data from one component to another

Question

I am developing a small React app, I'm having Files like

--Filter.js
--Result.js
--Index.js

Filter.js - Contains 2 textbox and button

Result.js - It contains the Filter.js and one P tag.

Index.js - Contains the Result.js

Filter.js:

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) => {
     this.props.handleData(this.state.myName)
  }

   onChange=(e)=>{
this.setState({myName: e.target.value})

   } 

  render() {
    return (
        <div>
        <form>
          Name: <input type="text" name="myName" onChange={this.onChange}/>
          <br />
          Email: <input type="text" name="myEmail" />
          <br /><br />
          <input type="button" value="Submit" onClick={this.SubmitValue}/>
          </form>
        </div>
    )
  }
}

ResultList.js

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) => {
this.setState({myName: e})
  }

  render() {
    return (
        <div>

        <Filter handleData={this.handleParentData}/>
 <p>{this.state.myName}</p>       

        </div>
    )
  }
}

Index.js

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 (
      <div>
        <ResultList />
       </div>
    );
  }
}

render(<App />, document.getElementById('root'));

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: https://stackblitz.com/edit/dhanapal-react-ex-1

How to get the both text field values in Result.js?

Solution

ok, so I made some changes to your code that you can view here: https://stackblitz.com/edit/dhanapal-react-ex-1-8pzeks?file=index.js

In the case that the above link no longer works, here is what I changed: Filter.Js:

export default class Filter extends Component {
  constructor(props){
    super(props);

    this.state = {
      myName: ''  
    }
}   

  submitForm = (e) => {
    e.preventDefault();

    this.props.handleData(this.state)
  } 

   onChange = (e) => {
     this.setState({
       myName: e.target.value
     });
   }

  render() {
    return (
        <div>
        <form>
          Name: <input type="text" name="myName" onChange={this.onChange}/>
         <br /><br />
          <input type="button" value="Submit" onClick={this.submitForm}/>
          </form>
        </div>
    )
  }
}

and in ResultList.js:

export default class ResultList extends Component {
   constructor(props){
      super(props);

      this.state = {
          myName: ''
      };
    }

    handleParentData = (formModel) => {
      this.setState({...formModel});
    }


  render() {
    return (
        <div>

          <Filter handleData={this.handleParentData}/>
          <p>{this.state.myName}</p>      

        </div>
    )
  }
}

It's important to note that any object you create in JS (i.e. your state in each component) is already in JSON format so no need to try and convert it. Here is what the problem was:

In Filter.js, you were passing a single property from the state (this.state.myName) and in ResultList.js, function handleParentData() you were expecting to receive an event much like you were from the on change functions but you were really just passing a string. That's why nothing would happen. In Filter.js when you want to post back the form to the parent component, I would suggest passing back the entire state object (which is already a JSON object) instead of an individual property. Refer to my working example and you should be able to see what I mean.

P.S. I think I accidentally edited your original code example, if I did I'm terribly sorry I didn't mean to.

Comments

[Admin]

No one will visit that link, which will be dead in an internet moment anyway, making this question useless for future readers. Provide a minimal reproducible example as suggested in How to Ask.

[Dhanapal]

Added the code in the question.

[Admin]

Did you check on SO already? stackoverflow.com/q/38420396/1531971 among others and see if that helps.

[Dhanapal]

I looked few references but that is not helped me. I am unable to get both values

[Admin]

We should assume that link will be dead in an internet moment. Show your code here inline as a minimal reproducible example.

[keyle56]

@Dhanapal Does this help? If not, please let me know what you're still confused on and I can help further.

[Dhanapal]

@keyle, I got it. I found where I did the mistake. It's working fine now :). Thank you.

[keyle56]

No problem, glad I could help ! :)

[Admin]

@keyle56, I am getting error this.props.handleData(this.state) is not function. How can I resolve this?