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?

CodePudding user response：

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 (....);
}