Passing props to parent in React JS

Question

Here I have a text field with a default number "3", and I want it to be updated when I input a value and click the button. Since, I'm updating the value in Child, I don't know how to pass props to Parent.

var Game = React.createClass({
    getInitialState: function() {
        return {
           input: 3
        };
    },

    setSize: function() {
        //here it should update "input"
        this.setState({input: /* value from Child */ })
    },

    render: function() {
        return( 
            <div>
                <div id='game'>
                    <Menu input={this.state.input}/>
                </div>
            </div>
        )
    }  
});


var Menu = React.createClass({
    render: function() {
        return (
            <div id='menu'>
                <input type="number" id="myNumber" value={this.props.input}> </input>
                <button id="mySetNumber" onclick={this.props.setSize}>Try it</button>
            </div>
        )
    }
})

I think you can pass a reference to a function in the parent, to the child as a property. Then call that on click. — Eric, Apr 01 '15 at 08:40
Could you please show an example, since I'm new to React JS? @Eric — user3053089, Apr 01 '15 at 08:44

score 10 · Accepted Answer · edited May 23 '17 at 12:17

10

It can be like this:

var Game = React.createClass({
  changeInput: function(e) {
    this.setState({/* do something */})
 },

 render: function() {
  return (
    <div id="game">
      <Menu onValueChange={this.changeInput} />
    </div>
    )
  }
});

var Menu = React.createClass({
  handleChange: function(e) {
    this.props.onValueChange(/* pass the element or the value */)
  }

 render: function() {
   return (
     <div id="menu">
       <input onChange={this.handleChange}/>
    </div>
   )
  }
})

More or less something like this should work. For more see this. The idea is to pass a callback function from the parent to the child.

edited May 23 '17 at 12:17

Community

1
1

answered Apr 01 '15 at 08:54

argentum47

2,385
1
18
20

3

Thnx @arargentum47 . If anyone needs a bit more specific with examples, here I found a [link](https://egghead.io/lessons/react-owner-ownee-relationship) of a video. – user3053089 Apr 01 '15 at 09:16
2

Dude! Thank you so so so much! – 0bserver07 Oct 20 '15 at 03:53

score 3 · Answer 2 · answered Dec 29 '16 at 20:26

var App = React.createClass({
    handleDayGreeting:function(greeting){
        this.setState({dayGreeting:greeting});
    },
    render:function({onClick,message}){     
        return (
            <div>
                <span> Hello ! {message} </span>
                <Greeting handleDayGreeting={this.handleDayGreeting.bind(this)} />              
            </div>          
        );
    }
});

var Greeting = React.createClass({
    sayMorining:function(){
        this.props.handleDayGreeting('Good Morining');
    },
    sayEvening:function(){
        this.props.handleDayGreeting('Hey...! Good Evening');
    },
    render:function(){
        return (
            <div>
                <button onClick={onClick}>Say Morning</button>
                <button onClick={onClick}>Say Evening</button>
            </div>
        );
    }
});

Passing props to parent in React JS

2 Answers2