Q:
Why I can't get value of class when I pass it to the function?
I'm just learning react, and wanted to use this API to get some data.
I'm trying to call the function "get_data" from my component in a local host but I keep getting this error "cannot read property 'city' of undefined".
This is what I'm trying to do, not sure if I'm on the right track. Any help would be appreciated.
import React from "react";
class App extends React.Component {
state = {
data: {
"zip": "",
"state": "",
"city": "",
"total": "",
"avg_browsers": "",
"max_browsers": ""
}
}
handleSubmit(e) {
e.preventDefault();
console.log(this.state.data);
get_data(this.state.data);
}
get_data = async (dat) => {
await axios.get("https://covid19.mathdro.id/api/us")
.then((resp) => {
dat = {
"state": resp.data.counties[0].state,
"city": resp.data.counties[0].name,
"zip": resp.data.counties[0].zip,
"total": resp.data.counties[0].total
};
console.log(dat);
});
}
render() {
return (
);
}
}
export default App;
A:
As you are handling the submit action from child component the value of this will be like,
{
e: {},
dat: {
zip: "",
state: "",
city: "",
total: "",
avg_browsers: "",
max_browsers: ""
}
}
This mean, data is out of the bound of scope in which the function is invoked.
Fix
You have to bind this to a context of that function. The binding have to happen at higher level of function.
class App extends React.Component {
constructor() {
super();
this.get_data = this.get_data.bind(this);
}
state = {
data: {
zip: "",
state: "",
city: "",
total: "",
avg_browsers: "",
max_browsers: ""
}
}
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state.data);
this.get_data(this.state.data);
}
get_data = async (dat) => {
await axios.get("https://covid19.mathdro.id/api/us")
.then((resp) => {
dat = {
"state": resp.data.counties[0].state,
"city": resp.data.counties[0].name,
"zip": resp.data.counties[0].zip,
"total": resp.data.counties[0].total
};
console.log(dat);
});
}
render() {
return (
);
}
}
export default App;
Alternatively
Use an arrow function as you will keep this in a bound of this function.
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state.data);
this.get_data(this.state.data);
}
Or in constructor
constructor() {
super();
this.get_data = this.get_data.bind(this);
}
get_data = async (dat) => {
await axios.get("https://covid19.mathdro.id/api/us")
.then((resp) => {
dat = {
"state": resp.data.counties[0].state,
"city": resp.data.counties[0].name,
"zip": resp.data.counties[0].zip,
"total": resp.data.counties[0].total
};
console.log(dat);
});
}
To get rid of redundant console.log() just assign the dat to your state properties
state = {
data: {
zip: "",
state: "",
city: "",
total: "",
avg_browsers: "",
max_browsers: ""
}
}
handleSubmit = (e) => {
e.preventDefault();
this.get_data(this.state.data);
}
