Component Cross Talk

car.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Car extends Component {
    state = {
        direction: null
    };

    constructor(props) {
        super(props);

        this.handleDirectionUpdate = this.handleDirectionUpdate.bind(this);
    }

    handleDirectionUpdate(direction) {
        this.setState({ direction });
    }

    render() {
        return (<div>
            <div>🚗 Current Direction: { this.state.direction }</div>
            <Driver updateDirection={ this.handleDirectionUpdate } />
        </div>);
    }
}

class Driver extends Component {
    constructor(props) {
        super(props);

        this.clickHandler = this.clickHandler.bind(this);
    }

    clickHandler(e) {
        e.preventDefault();

        this.props.updateDirection(e.target.value);
    }

    render() {
        return (<div>
            👨
            <button onClick={ this.clickHandler } value="left">Turn Left</button>
            <button onClick={ this.clickHandler } value="straight">Go Straight</button>
            <button onClick={ this.clickHandler } value="right">Turn Right</button>
        </div>);
    }
}

ReactDOM.render(<Car />, document.getElementById('app'));