title: Steps to populate dynamic Dropdown using arrays in REACTJS using react hooks
body: <p>Excuse my lack of knowledge as i am fairly new to ReactJS. I'm trying to create a dynamic Dropdown system where i have The Country DropDown and the cities DropDown, and i want to fetch my data from a const that has multiple arrays in it, here's an example of the const i have:</p>
  
  <pre><code>const countries = {"France":["Paris","Marseille","Lille","Lyon"],
                     "Usa":["New York","San Francisco","Austin","Dallas"]
                    };
  </code></pre>
  
  <p>I know that i need to use the useState and the useEffect hooks and a function to handle the event changes.</p>
  
  <p>What i'm having a hard time to figure out is how to deal with the data format, especially that the variables inside the const can't be accessed easily, it would've been much easier if the data was in this shape:</p>
  
  <pre><code>const countries =[
                     { name: 'Usa',  cities: ["New York", "San Francisco", "Austin", "Dallas"]},
                     { name: 'France', cities: ["Paris", "Marseille", "Lille", "Lyon"]},
                   ]
  
  </code></pre>
  
  <p>But unfortunately the first sample is the shape of data i have to deal with and i can't modify it manually because i have a very large sample of data.
  So if anyone could just direct me briefly into the steps i should make,
   i would be very thankful.</p>