search.js

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

class Search extends Component {
	static props = {
		onSubmit: PropTypes.func.isRequired,
	};

	constructor(props) {
		super(props);
		this.state = {
			query: '',
		};

		this.stateChange = this.stateChange.bind(this);
		this.fetch = this.fetch.bind(this);
	}

	stateChange(event) {
		this.setState({ query: event.target.value });
	}

	fetch(event) {
		event.preventDefault();
		this.props.onSubmit({ query: this.state.query });
	}

	render() {
		return (
			<div>
				<input
					className="input"
					name="query"
					placeholder="Search..."
					onChange={this.stateChange}
				/>
				<button onClick={this.fetch} type="submit">
					Fetch
				</button>
			</div>
		);
	}
}

export default Search;