I have a UScsvjson.json file which contains covid cases from a start date to an end date for every county for every US state. This is how it looks (for the most part)
[
{
"UID": 84001001,
"iso2": "US",
"iso3": "USA",
"code3": 840,
"FIPS": 1001,
"Admin2": "Autauga",
"Province_State": "Alabama",
"Country_Region": "US",
"Lat": 32.53952745,
"Long_": -86.64408227,
"Combined_Key": "Autauga, Alabama, US",
"1/22/20": 0,
... a bunch more dates ...
"5/27/21": 7141
},
{
"UID": 84001003,
"iso2": "US",
"iso3": "USA",
"code3": 840,
"FIPS": 1003,
"Admin2": "Baldwin",
"Province_State": "Alabama",
"Country_Region": "US",
"Lat": 30.72774991,
"Long_": -87.72207058,
"Combined_Key": "Baldwin, Alabama, US",
"1/22/20": 0,
... a bunch more dates ...
"5/27/21": 21606
},
... so on and so on for every county in every state ...
]
When I say 'state' I mean a State in the United States, not to be confused with state in React.
I would like for the user to select a US state from a dropdown menu, then based on that US state, retrieve all the counties for that US state in another dropdown menu, something like this:
so the "County" dropdown would contain Autaga, Baldwin, etc. Essentially, a dropdown containing all of the json's Admin2 properties, given that the respective json element's Province_State matches the US state the user chose in the previous dropdown.
Here is what I have currently for UnitedStates.js
:
import React from "react";
import * as data from "./us_data/UScsvjson.json";
const CountyList = ({ selectedState, data }) => {
const countyListForState = JSON.parse(data)
.filter((state) => (selectedState === state.Province_State))
.map((state) => state.Admin2);
/*my logic: parse the .json file. filter based on the objects with the same
Province_State property as our selected US state.
construct an array of these objects, lets call it US_Object_State_array.
then map each object in the US_Object_State_array to another new array containing only the counties,
and this array will be countyListForState.
then we will construct multiple <option> tags for every county in this array.
*/
return (
<div>
<label>county: </label>
<select>
{countyListForState.map((county) => (
<option value={county.Admin2}>{county.Admin2}</option>
))}
</select>
</div>
);
};
const StateList = () => {
/* below is the dropdown of states. this will be changed in the future to follow the same logic
as above. for right now, I just render 50 <option> elements, one for every US state*/
return (
<div>
<label>state: </label>
<select>
<option value="default" selected>
Select a state
</option>
<option value="Alabama">Alabama</option>
{/*... 48 US states later ...*/
<option value="Wyoming">Wyoming</option>
</select>
</div>
);
};
const UnitedStates = () => {
return (
<div className="dashboard">
<div className="title">COVID-19 state and county visualizer</div>
<div className="instructions">
select a state and county to see charts and data about how COVID-19 has
affected it from as early as January 2020 to present day.
</div>
<form
onSubmit={() => {
console.log("Working");
}}
>
<StateList state={"enter state"} />
<CountyList selectedState={"Alabama"} data={data} />
<button type = "submit">submit</button>
</form>
</div>
);
};
export default UnitedStates;
However, I get this error thrown:
TypeError: Cannot convert object to primitive value
2 | import * as data from "./us_data/UScsvjson.json";
3 |
4 | const CountyList = ({ selectedState, data }) => {
> 5 | const countyListForState = JSON.parse(data)
6 | .filter((state) => selectedState === state.Province_State)
7 | .map((state) => state.Admin2);
8 |
I assume that it stems from JSON.parse, but I am not sure how to fix it or how to read the .json file otherwise.
The form logic might be messed up a little. For right now, I just want to be able to do the json parsing and build React components based on it.
Best and thanks so much
