How do you filter JSON data using axios and useEffect?

I want to filter the data from this json file:

Array(53)
0: {fips: "02", country: "US", state: "AK", county: null, level: "state", …}
1: {fips: "01", country: "US", state: "AL", county: null, level: "state", …}
2: {fips: "05", country: "US", state: "AR", county: null, level: "state", …}
3: {fips: "04", country: "US", state: "AZ", county: null, level: "state", …}
4: {fips: "06", country: "US", state: "CA", county: null, level: "state", …}
5: {fips: "08", country: "US", state: "CO", county: null, level: "state", …}
6: {fips: "09", country: "US", state: "CT", county: null, level: "state", …}
7: {fips: "11", country: "US", state: "DC", county: null, level: "state", …}
8: {fips: "10", country: "US", state: "DE", county: null, level: "state", …}
9: {fips: "12", country: "US", state: "FL", county: null, level: "state", …}
10: {fips: "13", country: "US", state: "GA", county: null, level: "state", …}
11: {fips: "15", country: "US", state: "HI", county: null, level: "state", …}
12: {fips: "19", country: "US", state: "IA", county: null, level: "state", …}
13: {fips: "16", country: "US", state: "ID", county: null, level: "state", …}
14: {fips: "17", country: "US", state: "IL", county: null, level: "state", …}
15: {fips: "18", country: "US", state: "IN", county: null, level: "state", …}
16: {fips: "20", country: "US", state: "KS", county: null, level: "state", …}
17: {fips: "21", country: "US", state: "KY", county: null, level: "state", …}
18: {fips: "22", country: "US", state: "LA", county: null, level: "state", …}
19: {fips: "25", country: "US", state: "MA", county: null, level: "state", …}
20: {fips: "24", country: "US", state: "MD", county: null, level: "state", …}

0:
actuals: {cases: 65944, deaths: 318, positiveTests: 107163, negativeTests: 2044164, contactTracers: 235, …}
annotations: {cases: {…}, deaths: {…}, positiveTests: {…}, negativeTests: {…}, contactTracers: {…}, …}
country: "US"
county: null
fips: "02"
lastUpdatedDate: "2021-04-21"
lat: null
level: "state"
locationId: "iso1:us#iso2:us-ak"
long: null
metrics: {testPositivityRatio: 0.030363378437363597, testPositivityRatioDetails: {…}, caseDensity: 22.164440621268295, contactTracerCapacityRatio: 0.28986784140969163, infectionRate: 0.968046978543, …}
population: 731545
riskLevels: {overall: 2, testPositivityRatio: 1, caseDensity: 2, contactTracerCapacityRatio: 1, infectionRate: 1, …}
state: "AK"
url: "https://covidactnow.org/us/alaska-ak"

How can I use axios and React Hooks to filter this data and only get the state name and their actuals as variables to pass in a search UI later?

This is my code currently:

useEffect(() => {
        
        axios.get('https://api.covidactnow.org/v2/states.json?apiKey={apiKey}')
      
        .then(response => {
          return response.data;
          })
          .then(responseData => {
            console.log(responseData)
          })
        .catch(err => {
          console.log(err);
        });
      }, []);

Answer

const [data,setData] = useState([]);

useEffect(() => {      
        axios.get('https://api.covidactnow.org/v2/states.json?apiKey={apiKey}')
        .then(response => response.data)
        .then(responseData => {
            setData(responseData)
          })
        .catch(err => {
          console.log(err);
        });
      }, []);

I’d note that there probably isn’t a reason to try to get rid of the other fields. You could just save the entire response using setData.

After the useEffect runs, data will be filled with an array that you can access in your component.

---

Update, based on comments:

To filter just one state’s data out, you might do something like this:

const [stateData, setStateData] = useState();

//...

.then(responseData => {
  setStateData(responseData.filter(i => i.state === stateName)[0])            
})

Then, you could access the individual properties by doing:

stateData.actuals
stateData.deaths

If you wanted to do this while keeping all of the other API data (so that you could change states, for instance, without doing another call, it might look something like this):

const [stateName, setStateName] = useState("AK");
const [data,setData] = useState([]);
const [stateData, setStateData] = useState();

useEffect(() => {      
        axios.get('https://api.covidactnow.org/v2/states.json?apiKey={apiKey}')
        .then(response => response.data)
        .then(responseData => {
            setData(responseData)
          })
        .catch(err => {
          console.log(err);
        });
      }, []);

useEffect(() => {
  setStateData(data.filter(i => i.state === stateName)[0]) 
},[data, stateName])

Note: I’m not doing any error checking yet for whether [0] exists — you may want to have a case for if the data doesn’t exist