Skip to content

Instantly share code, notes, and snippets.

@sebkouba
Created February 17, 2016 06:00
Show Gist options
  • Save sebkouba/a5ac75153ef8d8827b98 to your computer and use it in GitHub Desktop.
Save sebkouba/a5ac75153ef8d8827b98 to your computer and use it in GitHub Desktop.
Basic example to pass values between parent and child components in React.
/**
* 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')
);
@umkhan65
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment