How to make Button work on Input (REACT) - reactjs

Question

I would like to have, an Add button. The following is the React.js code that I thought is one way of implement the logic that I want, but unfortunately it's doesn't work.
my getting this Error:
bundle.js:47 Uncaught Error: Cannot find module "./src/index.js"
at webpackMissingModule at Object.<anonymous>
at __webpack_require__
How do I solve this problem?
import React from "react"
import ReactDOM from "react-dom"
import SearchBar from "./components/search_bar"
const API_KEY = "TheRealAPIKeyWouldGoHere"
const App = () => {
handleChange(value){
this.setState({
value: event.target.value
});
}
return ( <div>
<SearchBar onChange={this.handleChange}/>
</div>
)
}
ReactDOM.render(<App />, document.querySelector(".container"))
This is my component. I have assigned Button to input but i can't figure out how to make it work.
import React, { Component } from "react"
class SearchBar extends Component {
constructor(props){
super(props)
this.state = {term: ""}
}
handleChange(evt){
this.props.onChange(value);
}
render () {
return <div>
<button onClick={this.handleChange}>Search</button>
<input ref="inputName" onChange= { event => console.log(event.target.value)} />
</div>
}
}
export default SearchBar

Answer 1

In your component:
import React, { Component } from "react"
class SearchBar extends Component {
constructor(props) {
super(props)
this.state = { term: '' }
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event) {
this.setState({ value: event.target.term })
}
handleSubmit(event) {
console.log(event.target.value)
event.preventDefault()
}
render() {
return (
<div>
<button onClick={this.handleSubmit}>Search</button>
<input
type="text"
value={this.state.term}
onClick={this.handleChange}
/>
</div>
)
}
}
export default SearchBar