32 lines
978 B
JavaScript
32 lines
978 B
JavaScript
import React from 'react'
|
|
|
|
class SearchBar extends React.Component {
|
|
state = { term: '' }
|
|
|
|
// using an arrow function instead of just defining the function is a way
|
|
// to prenvent undefined type of errors
|
|
// it is possible to do this in the html tag
|
|
// onSubmit={(event) => this.onFormSubmit(event)}
|
|
onFormSubmit = (event) => {
|
|
// Prevent the browser to refresh automatically
|
|
event.preventDefault()
|
|
this.props.onSubmit(this.state.term)
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
return (
|
|
<div className="ui segment">
|
|
<form className="ui form" onSubmit={this.onFormSubmit}>
|
|
<div className="field">
|
|
<label htmlFor="">Image Search</label>
|
|
<input value={this.state.term} type="text" onChange={(e) => this.setState({ term: e.target.value })} />
|
|
</div>
|
|
</form>
|
|
</div>)
|
|
}
|
|
}
|
|
|
|
export default SearchBar |