ReactJS Object 反应选择中的数组数据结构

Question

Hope we are doing great fams? I trust. I have a data object in a separate js file and i wanted to binded it to a react-select so that the react-select dropdown can be dynamically populated. The data object is like this:

    =======DDLListValues.js=======

export const countryListObject = [
    {label: "Afghanistan", value: "Afghanistan"},
    {label: "Albania", value: "Albania"},
    {label: "Åland Islands", value: "Åland Islands"},
    {label: "Algeria", value: "Algeria"},
    {label: "American Samoa", value: "American Samoa"},
    {label: "Andorra", value: "Andorra"},
];

export const stateList = [
    Afghanistan: [
          "Abc",
          "efg",
          "hij",
          "klm",         
        ],
        Albania: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
      Algeria: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
       American Samoa: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
       Andorra: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
];

WHAT I WANTED TO ACHIEVE i have two react-select dropdown that are dependent and I binded the countryListObject to the first dropdown select and onchange of the first react-select, it should automatically populates the second react-select dropdown with the corresponding selected value of the country react-select dropdown in the stateListObject in the javascript file ie it checks the stateListObject and pick the inner array that corresponds to the selected value of the country.

My code is below:

In my reactjs file, i have the following:

    =========Reactform.js

import { countryListObject, stateListObject } from './DDLListValues';

const [selectedcountry, setSelectedcountry] = useState({});
const [selectedstate, setSelectedstate] = useState({});

const [countries, setCountries] = useState(countryListObject);
const [stateoforigin, setStateoforigin] = useState({}); 

const onChangeCountry = (obj) => {
  setSelectedcountry(obj);
}

const onChangeState = (obj) => {
  setSelectedstate(obj);
}


{/* Binded countryListObject getting selected value successfully  */}
<Select name="countries" 
placeholder="Select your country"
value={selectedcountry}
options={ countryListObject } 
getOptionLabel={(option) => option.label}
getOptionValue={(option) => option.label}
onChange={(option) => onChangeCountry(option)}
/>

{/* I don't know how to accomplish this */}
<Select 
placeholder="States"
value={}
options={} 
onchange={} 
/>

Thank you fams in advance

Answer 1

First, you need to transform your state object keys into an array (i assume it's an object and you made a syntax mistake) and then iterate to find the country.

const onChangeState = (obj) => {
  setSelectedstate(obj);
  
  const stateCountryName = Object.keys(stateList).find((countryName) => {
    const isStateCountry = stateList[countryName].indexOf(obj.value) > -1;
    
    if (isStateCountry) return true;
    return false;
  })

 const countryObj = countryArray.find((country) => country.label === stateCountryName)
 
 onChangeCountry(countryObj);
}

Answer 2

deals with:

export const countryListObject = [
    {label: "Afghanistan", value: "Afghanistan", key: 'af'},
    {label: "Albania", value: "Albania", key: 'al'},
    {label: "Åland Islands", value: "Åland Islands", key: 'ai'},
    {label: "Algeria", value: "Algeria", key: 'alg'},
    {label: "American Samoa", value: "American Samoa", key: 'as'},
    {label: "Andorra", value: "Andorra", key: 'an'},
];

export const stateListObject = {
    af: [
          {label: "ABC", value: "ABC"},
          ......
        ],
        al: [
          {label: "ABC", value: "ABC"},
          ......  
        ],
      alg: [
          {label: "ABC", value: "ABC"},
          ......  
        ],
       as: [
          {label: "ABC", value: "ABC"},
          ...... 
        ],
       an: [
          {label: "ABC", value: "ABC"},
          ......  
        ],
};

const [states, setStates] = useState([]);
const onChangeCountry = (obj) => {
  setSelectedcountry(obj);
  setStates(stateListObject[obj.key]);
}

Answer 3

Thank you Vini for your efforts and time taken to answer this question but I have states array and i shared it in the question. Take a look at it below: –

    export const stateListObject = [
    Afghanistan: [
          "Abc",
          "efg",
          "hij",
          "klm",         
        ],
        Albania: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
      Algeria: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
       American Samoa: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
       Andorra: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
];

Is the state array good like that or I should wrap the value of each country in the state array like this {label,value}? But mind you, I am only populating the state dropdown on select of country dropdown but your solution looks like you are doing the population in country dropdown.

Answer 4

deal with this:

export const countryListObject = [
  {label: "Afghanistan", value: "Afghanistan"},
  {label: "Albania", value: "Albania"},
  {label: "Angola", value: "Angola"}
];

export const stateListObject = {
  Afghanistan: [
    {value: "ABC"},
    {value: "DEF"},
    {value: "GHI"},
  ],
  Albania: [
    {value: "123"},
    {value: "456"},
    {value: "789"},
  ],
  Angola: [
    {value: "A12"},
    {value: "B12"},
    {value: "C12"},
  ],
}
==========ReactForm.js
const [states, setStates] = useState([]);
const [selectedCountry, setSelectedCountry] = useState(null);
const [selectedState, setSelectedState] = useState(null);

const onChangeCountry = (obj) => {
    setSelectedCountry(obj);
    setStates(stateListObject[obj.value]);
}

const onChangeState = (obj) => {
    setSelectedState(obj);
}

<Select name="countries"
              placeholder="Select your country"
              value={selectedCountry}
              options={ countryListObject }
              getOptionLabel={(option) => option.label}
              getOptionValue={(option) => option.label}
              onChange={onChangeCountry}
      />

      <Select
        placeholder="States"
        options={ states }
        defaultValue={selectedState}
        getOptionLabel={(option) => option.value}
        getOptionValue={(option) => option.value}
        onChange={onChangeState}
      />