How to use json data for react-select? - reactjs

Question

How can I use a json data from a .json file and use it as options of react-select?
Currently I am using some options from the example they have in the documentation.
Here is my jsx code -
import React, { useEffect } from "react";
import Button from "#ui/button";
import Select from "react-select";
import { useState } from "react";
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" },
];
function Company({}) {
const [selectedOption, setSelectedOption] = useState(null);
return (
<>
<form className="company-form">
<div className="p-3 pt-0">
<label className="mt-3" htmlFor="jurisdiction-code">
Company Jurisdiction
</label>
<Select
className="text-xl"
defaultValue={selectedOption}
onChange={setSelectedOption}
options={options}
required
isClearable={true}
id="jurisdiction-code"
/>
</div>
<div className="mt-5">
<Button size="medium" fullwidth>
Submit
</Button>
</div>
</form>
</>
);
}
export default Company;
I have a separate json file for the options.
Here is my jurisdiction.json file code -
[
{
"id": 1,
"jurisdiction": "Alabama (US)",
"code": "us_al"
},
{
"id": 2,
"jurisdiction": "Alaska (US)",
"code": "us_ak"
},
{
"id": 3,
"jurisdiction": "Arizona (US)",
"code": "us_az"
},
{
"id": 4,
"jurisdiction": "Arkansas (US)",
"code": "us_ar"
},
{
"id": 5,
"jurisdiction": "California (US)",
"code": "us_ca"
}
]
I want to display jurisdiction and use code as the value.
How can I do that?

Answer 1

If the JSON data file is located in the public directory then you can use a useEffect hook to issue a fetch to retrieve it and save it into local state.
Example:
Assuming JSON file is located in public/data/data.json
function Company() {
const [selectedOption, setSelectedOption] = useState();
const [options, setOptions] = useState([]);
useEffect(() => {
const getOptions = async () => {
try {
const response = await fetch("/data/data.json");
const options = await response.json();
console.log(options);
setOptions(
options.map(({ id, jurisdiction, code }) => ({
id,
label: jurisdiction,
value: code
}))
);
} catch (error) {
// ignore
}
};
getOptions();
}, []);
return (....);
}