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