Thinkful React Communication Drills

gistfile1.txt

-----surprise.js-----

import React from 'react';

import SurpriseButton from './surprise-button';
import SurpriseImage from './surprise-image';

export default class Surprise extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            display: 'button'
        }
    }

    showImage() {
        this.setState({
            display: 'image'
        });
    }

    render() {
        if (this.state.display === 'button') {
            return <SurpriseButton onClick={e => this.showImage()} />;
        }
        else if (this.state.display === 'image') {
            return <SurpriseImage />;
        }
    }
}

-------->rate-calculator.js<--------

import React from 'react';

import NumberInput from './number-input';
import Output from './output';

export default class RateCalculator extends React.Component {
    constructor(props) {
        super(props);
        this.state ={
            dayRate:0,
            hours:0, 
        }
        this.handleDayRateChange = this.handleDayRateChange.bind(this); 
        this.handleHoursChange = this.handleHoursChange.bind(this);
    }

    handleDayRateChange(e){
       let dayRate= e.target.value; 
       this.setState({dayRate:dayRate});
}

    handleHoursChange(e){
        let hours = e.target.value; 
        this.setState({hours:hours}); 
    }

    render() {
        console.log(this.state);
        let rate = this.state.dayRate/this.state.hours;
        return (
            <form>
                <NumberInput handleChange={this.handleDayRateChange} id="day-rate" label="Day rate" min={0} max={5000} />
                <NumberInput handleChange={this.handleHoursChange} id="hours" label="Hours" min={1} max={12} />
                <Output id="hourly-rate" label="Hourly rate" value={rate.toFixed(2)}
/>           </form>
        );
    }
}

-------->live-search.js<--------

import React from 'react';

import SearchForm from './search-form';
import CharacterCount from './character-count';
import CharacterList from './character-list';

export default class LiveSearch extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchTerm: ''
        }
    this.handleSearchChange = this.handleSearchChange.bind(this);
    }
    handleSearchChange(term){
        this.setState({searchTerm:term});
    }
    render(){
        const characters = this.props.characters.filter(character => 
            character.name.includes(
                this.state.searchTerm
            )
        );
        console.log(characters);
        console.log(characters.length);  
        return(
            <div className='live-search'>
                <SearchForm onChange={this.handleSearchChange} />
                <CharacterCount count={characters.length} />
                <CharacterList characters={characters} />
            </div>
        );
    }
}