BigBrother.js

import React, {Component} from 'react';

export default class BigBrother extends Component{
    constructor(){
        super();
        this.state = {
            toys: ['Lego', 'Playdough'],
            currentToy: null
        }
    }
    
    handleMouseMove = (ev) => {
        let toy = this.state.currentToy;
        if(ev.clientX > 500){
            toy = this.state.toys[0];
        }else{
            toy = this.state.toys[1];
        }
        this.setState({currentToy: toy});
    }
    
    handleLeave = (ev) => {
        this.setState({currentToy: null});
    }
    
    styleObj = {
        padding: '1rem',
        fontSize: '2rem'
    }
    pStyle= {
        padding: '0 1rem'
    }
    
    render(){
        return (
            <div onMouseMove={this.handleMouseMove} 
            onMouseLeave={this.handleLeave} style={this.styleObj}>
                <p style={this.pStyle}>Big Brother is playing with {
                    (!this.state.currentToy)?'nothing': this.state.currentToy}.</p>
        
                 {  this.props.copycat && 
                     this.props.copycat(this.state)
                 }
                 {/* call the render method to build whatever component
                 was passed to the render method.
                 The component that was passed in will have access 
                 to THIS component's state. */}
            </div>
        );
    }
}