Can someone please tell me why i am getting this error . I tried fixing it all day, but I could not fix it. So at last i had to come at stackoverflow
This is my code : App.js
import "./App.css";
function App() {
const [inputvalue, setInputvalue] = useState(" ");
const [apidata, setApidata] = useState([]);
const [finalpoint, setFinalpoint] = useState("");
useEffect(() => {
fetch(
`https://weatherapi-com.p.rapidapi.com/forecast.json?q=+${inputvalue}&days=3`,
{
method: "GET",
headers: {
"x-rapidapi-host": "weatherapi-com.p.rapidapi.com",
"x-rapidapi-key":
"7f89bf16ebmsh9dff0f23f963d34p190691jsn264543e18108",
},
}
)
.then((response) => {
return response.json();
})
.then((data) => {
setApidata(data);
})
.catch((err) => {
console.error(err);
});
}, [finalpoint]);
const onchangeinput = (e) => {
setInputvalue(e.target.value);
};
const onsubmithandler = (e) => {
e.preventDefault();
setFinalpoint(inputvalue);
};
return (
<div className="App">
<div className="main">
<h2>Welcome To weather App </h2>
</div>
<form onSubmit={onsubmithandler}>
<input type="text" value={inputvalue} onChange={onchangeinput} />
<button type="submit">Search</button>
</form>
{apidata.map((data, i) => {
return <h1>{data.current.feelslike_c}</h1>;
})}
</div>
//Map
);
}
export default App;
This is the error I am getting : enter image description here
Check if you are receiving undefined here:
.then((data) => {
setApidata(data);
})
and overriding the state with undefined.
What I'm seeing is the api is initially returning an error object. Also, when the proper data is returned, it comes back as an object. When setting your state, you will have to set data inside of an array (if you want to use the map method). You will also have to handle the error by doing something like this:
import { useState, useEffect } from "react";
function App() {
const [inputvalue, setInputvalue] = useState(" ");
const [apidata, setApidata] = useState([]);
const [finalpoint, setFinalpoint] = useState("");
useEffect(() => {
fetch(
`https://weatherapi-com.p.rapidapi.com/forecast.json?q=+${inputvalue}&days=3`,
{
method: "GET",
headers: {
"x-rapidapi-host": "weatherapi-com.p.rapidapi.com",
"x-rapidapi-key": "7f89bf16ebmsh9dff0f23f963d34p190691jsn264543e18108"
}
}
)
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data)
if (data.error) return null;
setApidata([data]);
})
.catch((err) => {
console.error(err);
});
}, [finalpoint]);
const onchangeinput = (e) => {
setInputvalue(e.target.value);
};
const onsubmithandler = (e) => {
e.preventDefault();
setFinalpoint(inputvalue);
};
console.log("test", apidata);
return (
<div className="App">
<div className="main">
<h2>Welcome To weather App </h2>
</div>
<form onSubmit={onsubmithandler}>
<input type="text" value={inputvalue} onChange={onchangeinput} />
<button type="submit">Search</button>
</form>
{apidata.length
? apidata.map((data, i) => {
return <h1 key={i}>{data.current.feelslike_c}</h1>;
})
: null}
</div>
//Map
);
}
see working example: https://codesandbox.io/s/eager-wind-06ywo?file=/src/App.js