[React Fundamentals] Owner Ownee Relationship

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>
    )
}