Skip to content

Instantly share code, notes, and snippets.

@NiklasJordan
Created September 26, 2018 19:43
Show Gist options
  • Save NiklasJordan/38d139d738662720329e0b3ed8209ba2 to your computer and use it in GitHub Desktop.
Save NiklasJordan/38d139d738662720329e0b3ed8209ba2 to your computer and use it in GitHub Desktop.
import React from 'react';
import './SearchBar.css';
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {
search: ''
};
this.search = this.search.bind(this);
this.handleTermChange = this.handleTermChange.bind(this);
}
search() {
this.props.onSearch(this.state.search);
}
handleKeyPress(e) {
if (e.key === 'Enter') {
this.search()
}
}
handleTermChange(e) {
this.setState({ search: e.target.value });
}
render() {
return (
<div className="SearchBar">
<input placeholder="Enter A Song, Album, or Artist" onChange={this.handleTermChange} onKeyPress={this.handleKeyPress} />
<a onClick={this.search}>SEARCH</a>
</div>
);
}
}
export default SearchBar;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment