import React, { Component } from 'react';

class SearchBar extends Component {
	constructor(props) {
		super(props);

		this.state = { term: '' };
	}

	render() {
		return (
			<div className="col-md-8 search-bar">
				<h1>Youtube video search</h1>
				Search: <input 
					value={this.state.term} 
					onChange={event => this.setState({ term: event.target.value })} />
			</div>
		);
	}
}

export default SearchBar;
import React, { Component } from 'react';

class SearchBar extends Component {
	constructor(props) {
		super(props);

		this.state = { term: '' };
	}

	render() {
		return (
			<div className="col-md-8 search-bar">
				<h1>Youtube video search</h1>
				Search: <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;
Change the onChange to call a new method onInputChange which sets the state for this component as the value, also calls the callback property onSearchTermChange passing in the value.
Change the onChange to call a new method onInputChange which sets the state for this component as the value, also calls the callback property onSearchTermChange passing in the value.
