The owner-ownee relationship is used to designate a parent-child relationship with React components as it differs from the DOM relationship.
import React from 'react';
export default class App extends React.Component {
constructor(){
super(); //This is going to give us our context for this within our component
this.update = this.update.bind(this);
this.state = {
txt: 'State',
count: 1
}
}
update(e){
this.setState({
txt: e.target.value
})
}
render() {
return (
<div>
<Widget txt={this.state.txt} update={this.update}></Widget>
<Widget txt={this.state.txt} update={this.update}></Widget>
</div>
)
}
}
// "Widget" must be capitalized
const Widget = (props) => {
return (
<div>
<input type="text" onChange={props.update} />
<span>Hello {props.txt}</span>
</div>
)
}