gistfile1.txt

GIF EXAMPLE: 

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 />;
        }
    }
}

BUTTON:

import React from 'react';

export default function SurpriseButton(props) {
    return <button onClick={props.onClick}>Surprise!</button>;
}


#############################################

Calculator example:

Number input module:

import React from 'react';

export default function NumberInput(props) {
    return (
        <div className="form-group">
            <label htmlFor={props.id}>{props.label}</label>
            <input type="number" id={props.id} min={props.min} max={props.max}
                onChange={e => props.onChange(e.target.value)} value={props.value} />
        </div>
    );
}

***Notes, the props here are the htmlFOR which will contain the id of the component when rendered by the parent, 
for the number input, the id and min and max are all properties of this component who's values will be provided by the state of the parent
component. onchange property includes a function to target the value of this property when an event is triggered. All of this is wrapped in
a div, with a classname attribute. All of this is returned by the NumberInput function, which takes props as an argument. 

import React from 'react';

export default function Output(props) {
    return (
        <div className="form-group">
            <label htmlFor={props.id}>{props.label}</label>
            <output id={props.id} aria-live="polite">
                ${props.value}
            </output>
        </div>
    );
}

Output.defaultProps = {
    value: 0
};

This is the Output compoenent. Returns a div containing the total amount. same structure as the previous... not sure why there is a dollar
sign there. 

import React from 'react';

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

*all of these are the imported components*

export default class RateCalculator extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            dayRate: 300,
            hours: 8
        };
    }
*this is the default state of this component^^^*
    setDayRate(dayRate) {
        this.setState({
            dayRate
        });
    }
*this is a function to set the state of dayRate, which will be called by a property when an event is triggered*
    setHours(hours) {
        this.setState({
            hours
        });
    }
*same with this, above*
    render() {
        const rate = this.state.dayRate / this.state.hours; **divided by**
        return (
            <form>
                <NumberInput id="day-rate" label="Day rate" min={0} max={5000}
                    value={this.state.dayRate}
                    onChange={value => this.setDayRate(value)} />
                <NumberInput id="hours" label="Hours" min={1} max={12}
                    value={this.state.hours}
                    onChange={value => this.setHours(value)}/>
                <Output id="hourly-rate" label="Hourly rate" value={rate.toFixed(2)} />
            </form>
        );
    }
}


$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

import React from 'react';

export default function CharacterList(props) {
    const characters = props.characters.map((character, index) =>
        <li key={index}>
            <strong>{character.name}</strong> ({character.actor}) - {character.description}</li>
    );
    return (
        <ul className="character-list" aria-live="polite">
            {characters}
        </ul>
    );
}

exporting the default function for the component...which takes the const characters which is set to all of the charachters in the array
mapped to a list HTML formating, and returns a ul with a list map, which is actually the characters variable set in curly brackets  


import React from 'react';

export default function SearchForm(props) {
    return (
        <form onSubmit={e => e.preventDefault()}>
            <label htmlFor="search">Search</label>&emsp;
            <input type="search" id="search" name="search" placeholder="Dale Cooper" 
                onChange={e => props.onChange(e.target.value)} />
        </form>
    );
}

This component is the search component. Which handles the typing event, every time there's an event change it changes the value of the 
component. 

import React from 'react';

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

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

    render() {
        const characters = this.props.characters.filter(character =>
            character.name.toLowerCase().includes(
                this.state.searchTerm.toLowerCase()
            )
        );
        return (
            <div className="live-search">
                <SearchForm onChange={searchTerm => this.setState({searchTerm})} />
                <CharacterList characters={characters} />
            </div>
        );
    }
}

The only state in this component is the thing that is changing, which is the searchCriteria. The render statement equals the newly rendered list of characters data. The return returns the characters as the prop of CharachterList, which is the formatting for the list, The search form has the onchange prop which changes the state, and thus calls the render funtion