6.2 - Video Component

Add the following code to SearchBar.js:

import React, { Component } from 'react';

class SearchBar extends Component {
    constructor(props) {
        super(props);
        this.state = { term: ' ' };
    }

    render() {
        return  (
            <div className="search-bar">
                <label className="vidSearchLbl">
                    Search For React Tutorials 
                </label>
                <input 
                value = {this.state.term} 
                onChange={ (event) => this.onInputChange(event.target.value) } />
            </div>
        );        
    }

    onInputChange(term) {
        this.setState({term});
        this.props.onSearchTermChange(term);
    }
}
export default SearchBar;