Submit form on enter form react component child - reactjs

Question

I have a unique scenario where I want to check for an enter keypress and tell the parent component to run the submit function. It looks like this.
The onClick={this.props.onSubmitForm} works but I can't get it to submit when the enter key is pressed.
Thanks
Search Component
class Search extends React.Component {
_handleKeyDown = (e) => {
if (e.key === 'Enter') {
this.props.onSubmitForm
}
}
render() {
return (
<div className="searchContainer">
<label>
<p>Search</p>
<input
type="text"
value={this.props.value}
onChange={this.props.onChangeValue}
onKeyDown={this._handleKeyDown}
className="searchBox" />
</label>
<div className="searchButton" onClick={this.props.onSubmitForm}>
>
</div>
</div>
)
}
}
export default Search;
Parent
handleSearchSubmit = (e) => {
if (this.state.value != '') {
this.searchLocation(this.state.value)
}
}
handleSearchSubmit = (e) => {
if (this.state.value != '') {
this.searchLocation(this.state.value)
}
}
<Search
value={this.state.value}
onChangeValue={this.handleChangeValue}
onSubmitForm={this.handleSearchSubmit}
/>

Answer 1

You're just telling, but not calling it here:
this.props.onSubmitForm
You have to do:
this.props.onSubmitForm()
to call the function. Also, a better way of detecting Enter is:
var code = e.which || e.keyCode;
if (code == 13) {
this.props.onSubmitForm();
}
Also, a much better way and right way without using the above logic is to wrap the form elements inside <form> tag and attach the onSubmit handler like this (thanks to Gayatri Dipali's comment on my answer):
<form className="searchContainer" onSubmit={this.props.onSubmitForm}>
<label>
<p>Search</p>
<input
type="text"
value={this.props.value}
onChange={this.props.onChangeValue}
onKeyDown={this._handleKeyDown}
className="searchBox" />
</label>
<button type="submit" className="searchButton">
>
</button>
</div>