How to parse data from child to parent using reactjs?

Question

Hi I am currently working on reactjs but in very basic level. I was trying to parse data from parent to child as well as child to parent. Parent to child is working properly but child to parent I couldn't.

Here is the whole scenario... I have 3 components.. App, Home and User. From App component to Home component I want to parse data.. It is working properly. In Home component I have an Input field. If I write something and click on button then the input value will parse into App component. App is my parent and Home is child..

Here is the code... APP Component

    constructor() {
          super() 
          this.state = {
              userName : ' '
          };
      }
    changeUName(newName) {
        this.setState({
            userName: newName
        });
        console.log('user',newName);  // Getting Undefined
    }

  render() {

    return (

      <div className="App">

        <Home changeUser = {() => this.changeUName()} />
      </div>
    );
  }

Child Component User

constructor(props) {

        super();

        this.state = {

            userName: ''

        };
    }
    changeUName(event) {
        this.setState({
            userName: event.target.value
        });
    }

    nameChange() {
        console.log(this.state.userName)         // If I write "Test" in input field. I will get the value here. 

        this.props.changeUser(this.state.userName); // Once I parse this value, I am getting undefined..
    }

    render() {
        return(                              
            <div>
                <h1> HOME Page</h1>
                Name : <input type="text" value={this.state.userName} onChange={(event) => this.changeUName(event)} ref="uName"/><br/>
                <button onClick={() => this.nameChange()}>Click</button>
            </div>
        )
    }

I do not know where it is going wrong. Please guide me. Thanks in advance..

Possible duplicate of [How to pass data from child component to its parent in ReactJS?](http://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs) — Shubham Khatri, Apr 06 '17 at 05:45
Thanks @Shubham. I have seen this post. Tried lot since yesterday but still showing undefined value. — R. Dey, Apr 06 '17 at 05:51

score 0 · Answer 1 · answered Apr 06 '17 at 05:57

0

The culprit is this line of code:

<Home changeUser = {() => this.changeUName()} />

You call changeUName without any parameter. You should write instead:

<Home changeUser = {name => this.changeUName(name)} />

Or

<Home changeUser = {this.changeUName} />

By the way, have you considered storing your user name into a redux store ? If you haven't studied that yet, you should definitely look into it. In this case you would store the user name in the redux store, and pass it to the App (and other components) by injecting it to their props.

answered Apr 06 '17 at 05:57

Antoine Trouve

1,198
10
21

1

Thanks @Antoine. It is working. But tell me just one thing, If I reused this data, then how should I do...? It means I want to reuse my input value for further process like parsing in another child component or to print it on page, then how should I do...? – R. Dey Apr 06 '17 at 06:01
@R.Dey you're welcome :) About your first question, do you mean you want to display the userName in other components ? In this case you would pass the userName as props of components from App to the target child. Yet in this case I would **strongly** suggest you to use redux with connect so you don't have to actually forward the userName: you can directly 'connect' the target child component. – Antoine Trouve Apr 06 '17 at 06:07
Thanks for your suggestion. Yes I have seen this. But I just have started learning. So until I have clear idea about react, I can't go for redux. :) – R. Dey Apr 06 '17 at 06:13

score 0 · Accepted Answer · answered Apr 06 '17 at 05:59

The thing is that you are not binding the props recieved to the function definition. See the below snippet

class Parent extends React.Component { 
   constructor() {
          super() 
          this.state = {
              userName : ' '
          };
      }
    changeUName(newName){
        this.setState({
            userName: newName
        });
        console.log('user',newName);  // Getting Undefined
    }

  render() {

    return (

      <div className="App">

        <Home changeUser = {(value) => this.changeUName(value)} />
      </div>
    );
  }
}
class Home extends React.Component {
  constructor(props) {

        super();

        this.state = {

            userName: ''

        };
    }
    changeUName(event) {
        this.setState({
            userName: event.target.value
        });
    }

    nameChange() {
        console.log(this.state.userName)         // If I write "Test" in input field. I will get the value here. 
        
        this.props.changeUser(this.state.userName); 
    }

    render() {
        return(                              
            <div>
                <h1> HOME Page</h1>
                Name : <input type="text" value={this.state.userName} onChange={(event) => this.changeUName(event)} ref="uName"/><br/>
                <button onClick={() => this.nameChange()}>Click</button>
            </div>
        )
    }
    
}

ReactDOM.render(<Parent/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Or else Specify the funtion with arrow function

 changeUName = (newName) =>{
        this.setState({
            userName: newName
        });
        console.log('user',newName);  // Getting Undefined
    }

and call it like

<Home changeUser = {this.changeUName} />

thanks.. Great. Yes I made this silly mistake. Aagain and again. Thank you once again. It is working properly now.. — R. Dey, Apr 06 '17 at 06:15

How to parse data from child to parent using reactjs?

2 Answers2

Linked