Cascade Dropdown using react Hooks

Question

Hi Guys I'm new to React. I am trying to create a cascade drop down list using react hooks and the way I did it works well but I feel something wrong in the way I did it. Please check this code and tell me there is a way that I can improve my code.Thanks in advance

import React, { useState } from 'react';
import './App.css';


function App() {

    const[data, setName] = useState({
      countrie:"",
      state:""
    });


    let state;
    const countrie =['Germany','India','France']

    const gstate = ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn']
    const istate = ['Delhi', 'Kolkata', 'Mumbai', 'Bangalore']
    const fstate =['Auvergne','Bretagne','Corse','Centre']

    if(data.countrie==="Germany"){

        state = gstate.map((gstate,key)=> <option key={key} value={gstate}>{gstate}</option>)

     }else if(data.countrie==="India"){

        state = istate.map((istate,key)=> <option key={key} value={istate}>{istate}</option>)

     }else{

       state = fstate.map((fstate,key)=> <option key={key} value={fstate}>{fstate}</option>)
     }

    const countries = countrie.map((countrie,key)=> <option key={key} value={countrie}>{countrie}</option>)


  function handleCountry(e){
    
    setName({...data,countrie:e.target.value});

  }

  function handleStateChange(e){
    
    setName({...data,state:e.target.value});
  }

return (
    <form onSubmit={handleSubmit}>
             <div>
                 <select value={data.countrie} onChange={handleCountry}>
                   {countries}
                 </select>
             </div>

            <div>
          <select value={data.state} onChange={handleStateChange}>
                  {state}
          </select>
            </div>
      <input type="submit" />
    </form>
  );
}

export default App;

Answer 1

The best suggestion I have is to change the data structure which combines the country and states. Doing so makes it a lot easier to map over each country and getting the states without having to map variables. This makes it also more scalable.

Here is an example using the country data as a collection:

Codesandbox

import React, { useState } from "react";

const countriesData = [
  {
    name: "Germany",
    states: ["Duesseldorf", "Leinfelden-Echterdingen", "Eschborn"]
  },
  {
    name: "India",
    states: ["Delhi", "Kolkata", "Mumbai", "Bangalore"]
  },
  {
    name: "France",
    states: ["Auvergne", "Bretagne", "Corse", "Centre"]
  }
];

function Form() {
  const [{ country, state }, setData] = useState({
    country: "Germany",
    state: ""
  });

  const countries = countriesData.map((country) => (
    <option key={country.name} value={country.name}>
      {country.name}
    </option>
  ));

  const states = countriesData.find(item => item.name === country)?.states.map((state) => (
    <option key={state} value={state}>
      {state}
    </option>
  ));

  function handleCountryChange(event) {
    setData(data => ({ state: '', country: event.target.value }));
  }

  function handleStateChange(event) {
    setData(data => ({ ...data, state: event.target.value }));
  }

  return (
    <form onSubmit={() => console.log("Submitted")}>
      <div>
        <select value={country} onChange={handleCountryChange}>
          {countries}
        </select>
      </div>

      <div>
        <select value={state} onChange={handleStateChange}>
          {states}
        </select>
      </div>
      <input type="submit" />
    </form>
  );
}

export default Form;