ReactJS Object Array Data Structuring in react-select-CodePudding

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 i.e 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

CodePudding user response：

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.

CodePudding user response：

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]);
}

CodePudding user response：

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