Basic example to pass values between parent and child components in React.

ParentChild.es6

/**
 * Basic example to pass values between parent and child components in React
 * Seems to be in line with this
 * http://stackoverflow.com/questions/24147331/react-the-right-way-to-pass-form-element-state-to-sibling-parent-elements
 * Now I have the state in parent and child. Is that good or bad? Why would I need it in child?
 * Could probably take that out
 * */
class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fieldVal: ""
    }
  }

  onUpdate = (val) => {
    this.setState({
      fieldVal: val
    })
  };

  render() {
    return (
      <div>
        <h2>Parent</h2>
        Value in Parent Component State: {this.state.fieldVal}
        <br/>
        <Child onUpdate={this.onUpdate} />
        <br />
        <OtherChild passedVal={this.state.fieldVal} />
      </div>
    )
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fieldVal: ""
    }
  }

  update = (e) => {
    console.log(e.target.value);
    this.props.onUpdate(e.target.value);
    this.setState({fieldVal: e.target.value});
  };

  render() {
    return (
      <div>
        <h4>Child</h4>
        <input
          type="text"
          placeholder="type here"
          onChange={this.update}
          value={this.state.fieldVal}
        />
      </div>
    )
  }
}

class OtherChild extends React.Component {
  render() {
    return (
      <div>
        <h4>OtherChild</h4>
        Value in OtherChild Props: {this.props.passedVal}
      </div>
    )
  }
}


React.render(
  <Parent />,
  document.getElementById('react_example')
);

JSBin

If I want to pass value from one child to another child then.
And not a single value but values of multiple inputs.

When i try this on code i got this.setState undiefined in the parent component. So when i put the following code inside parent component's constructor it works

this.onUpdate = this.onUpdate.bind(this);

Thanks a lot my friend , finally solved my problem!!

For those who are still in struggle ( It's IN REACT NATIVE ):

PARENT

 func = (smh) => { 
    alert(smh)
  }    

 <ChildComponent func={this.func} /> 

CHILD

 pressHandler(smh) {
    this.props.func(smh)
  }    

 <Text onPress={() => this.pressHandler("sss")}> Click here <Text/>

Thanks a lot!

Thanks! Could you please tell me that where did the code this.props.value('text') refer to ? I didn't find detail in React or React Native official website.

point => this.props.onScroll(point)
https://reactjs.org/docs/faq-functions.html

@SimonHudec, Thanks alot

That is exactly what I was looking for the whole day :) Thank you!

Excelent !!!
Works so good

how can this code working on multi input/state?

like this

    this.state = {
      fieldVal: ""
      otherFieldVal: ""
    }

I tried

  onUpdate = name => (event) => {
    this.setState({ [name]: event.target.value });
  };

  update = name => (event) => {
    console.log(event.target.value);
    this.props.onUpdate(event.target.value);
    this.setState({ [name]: event.target.value });
  };

But the display not update in real time, thanks

Thanks a lot my friend , finally solved my problem!!

For those who are still in struggle ( It's IN REACT NATIVE ):

PARENT

 func = (smh) => { 
    alert(smh)
  }    

 <ChildComponent func={this.func} /> 

CHILD

 pressHandler(smh) {
    this.props.func(smh)
  }    

 <Text onPress={() => this.pressHandler("sss")}> Click here <Text/>

Man I love you. This works