Target not defined react - reactjs

Question

sorry for the noob question, but I am getting a target undefined. I've tried passing the componentDidMount on my onformsubmit however React is telling me the query variable is not defined.
import React, { Component } from 'react'
import DisplayData from './DisplayData';
export default class stockSearch extends Component {
state = {
searchResult: {},
}
componentDidMount = (e) => {
const query = e.target.elements.query.value
fetch(`https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT&tsyms=USD`)
.then((response) => response.json())
.then(data => {
this.setState({ searchResult: data });
console.log(this.state.searchResult);
});
}
render() {
const { searchResult } = this.state;
return (
<form onSubmit={this.props.componentDidMount}>
<label>
Name:
<input type="text" name="query" placeholder="Search Crypto" />
</label>
<button>Search Crypto</button>
<DisplayData results={searchResult} />
</form>
);
}
}

Answer 1

componentDidMount is one of the React Component lifecycle methods so you shouldn't pass it as the onSubmit handler. Instead, you should create a new method, e.g fetchData, which you pass to the form's onSubmit.
If you want to also fetch data on mount, you can call your handler in componentDidMount
export default class StockSearch extends Component {
state = {
searchResult: {},
queryValue: ''
}
componentDidMount() {
fetchData('default');
}
fetchData = (query) => {
fetch(`http://something.com/${query}`)
.then(...)
.then(data => {
this.setState({ searchResult: data })
});
}
render() {
return (
<form onSubmit={() => fetchData(this.state.queryValue)}>
<input
value={this.state.queryValue}
onChange={(e) => this.setState(e.target.value)}
/>
</form>
)
}
}
A few other things I've changed:
1. React components should be UpperCamelCase
2. Generally you'll manage state in your component, for example input values
.