I'm pretty new to hooks and I'm trying to use setState for data I'm getting back from an API, but the state never updates. I only need to make the call when the component mounts, which is why the second argument in my useEffect is an empty array. I can see that I'm getting back the data when I console.log the response, it just isn't being set.
const [routeOptions, setRouteOptions] = useState()
useEffect(() => {
Axios.get("https://svc.metrotransit.org/NexTrip/Routes?format=json").then(response => {
const routes = response.data
setRouteOptions(routes)
});
}, []);
I then try to map through the data like so:
{routeOptions && routeOptions.map(option => {
<option>
{option.description}
</option>
})}
but because my state never got set there's nothing to map through.
I may be missing something super obvious cause I'm not familiar with hooks, so any help is appreciated!
You need to return a value from your .map(). Make sure to give your <option> a unique key prop as well.
Note also that the route property Description has a capital D :)
<select>
{routeOptions.map((option) => {
return <option key={option.Route}>{option.Description}</option>;
})}
</select>
here it is all together
import { useState, useEffect } from "react";
import Axios from "axios";
export default function Test() {
const [routeOptions, setRouteOptions] = useState(null);
useEffect(() => {
Axios.get("https://svc.metrotransit.org/NexTrip/Routes?format=json").then(
(response) => {
const routes = response.data;
setRouteOptions(routes);
}
);
}, []);
if (!routeOptions)
return (
<div>
<p>Loading...</p>
</div>
);
return (
<select>
{routeOptions.map((option) => {
return <option key={option.Route}>{option.Description}</option>;
})}
</select>
);
}
try to use Async-select https://react-select.com/async and make a function that returns an array of pair {label, value} instead of wasting your time stuck here.