Cannot read property 'state' of undefined in API call - reactjs

Question

I have the following component in react
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
cityName: "",
weather: ""
}
this.handleChange = this.handleChange.bind(this);
}
componentDidMount() {
fetch(`https://api.weatherapi.com/v1/current.json?key=.....&q=${this.state.cityName}&aqi=no`)
.then(response => response.json())
.then(json => {
this.setState({ weather: json});
});
}
handleChange(event) {
this.setState({cityName: event.target.value});
}
render() {
return (
<center>
<p><font color="bluesky" size="10">Weather</font></p>
<div class="card-body">
<input type="text" value={this.state.value} onChange={this.handleChange} placeholder="Type the name of city"></input>
<h3>{this.state.cityName}</h3>
</div>
<div>
<button className="btn btn-secondary btn-sm" onClick={this.componentDidMount}>Check weather</button>
</div>
</center>
);
}
}
and for this line of code
fetch(`https://api.weatherapi.com/v1/current.json?key=...&q=${this.state.cityName}&aqi=no`)
I get the next error "TypeError: Cannot read property 'state' of undefined". I am new to react, can somebody help me to fix this error ?

Answer 1

You are calling component lifecycle method to handle form submit. Create a submitHandler just as you've the changeHandler and it should work fine.
onSubmit = () => {
fetch(`https://api.weatherapi.com/v1/current.json?key=.....&q=${this.state.cityName}&aqi=no`)
.then(response => response.json())
.then(json => {
this.setState({ weather: json});
});
}
The button will be configured as:
<button className="btn btn-secondary btn-sm" onClick={this.onSubmit}>Check weather</button>
Pro tip: Use arrow functions to define custom methods in your component.
Note: You need to configure the API key and handle the response correctly,use console.log(json) in the second .then() and see what you get.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
cityName: "",
weather: ""
}
}
onSubmit = () => {
fetch(`https://api.weatherapi.com/v1/current.json?key=.....&q=${this.state.cityName}&aqi=no`)
.then(response => response.json())
.then(json => {
this.setState({ weather: json});
});
}
handleChange = (event) => {
this.setState({cityName: event.target.value});
}
render() {
return (
<center>
<p><font color="bluesky" size="10">Weather</font></p>
<div class="card-body">
<input type="text" value={this.state.cityName} onChange={this.handleChange} placeholder="Type the name of city"></input>
<h3>{this.state.weather}</h3>
</div>
<div>
<button className="btn btn-secondary btn-sm" onClick={this.onSubmit}>Check weather</button>
</div>
</center>
);
}
}

Answer 2

componentDidMount() is a function where its code is executed when the component is mounted, so when you fetch data with in componentDidMount(), the ${this.state.cityName} in the URL is still equal to nothing (cityName: "" in your default state)
You need to set a default value to cityName like
this.state = {
cityName: "London",
weather: ""
}
or
You need to fetch only after the user pressed a button
search() {
// fetch here
}
<button className="btn btn-secondary btn-sm" onClick={this.search}>Check weather</button>
And by the way you need to remove onClick={this.componentDidMount} from the button because componentDidMount is automatically called when the component is mounting, better replace this by onClick={this.search} and create a search function where you can fetch datas