Enhanced Youtube # 1 - Search Bar

app.js

class App extends Component {
    render() {
        return (
            <div>
                <SearchBar onSearchTermChange={term => this.onSearchTermChange(term)}/>
            </div>
        );
    }

    onSearchTermChange(term){
        console.log(`New term ${term}`)
    }
}

search.bar.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class SearchBar extends Component {

    state = {
        searchTerm: ''
    }

    render() {
        return (
            <div className="search-bar">
                <input
                    value={this.state.searchTerm}
                    onChange={event => this.onInputChange(event.target.value)} />
            </div>
        );
    }

    onInputChange(term){
        this.setState({
            searchTerm: term
        });
        this.props.onSearchTermChange(term);
    }
}

SearchBar.propTypes = {
    onSearchTermChange: PropTypes.func
}

export default SearchBar;