title: Coordinating 2 drop-down dynamically in ReactJS
body: <p>First post and I'll keep this short.
  I have a data fetched from an API and I want to, when you select let's say group A, then the second drop-down will display all the members from group A only. </p>
  
  <p>These are the example response from the APIs I have access to.
  Note: there are many members in a group.</p>
  
  <p>List groups</p>
  
  <pre><code>[
    "Group A",
    "Group B",
    "Group C"
  ]
  </code></pre>
  
  <p>Get members by groups</p>
  
  <pre><code>[
   {
     "group": "Group A",
     "name": " Jimmy"
   }
  ]
  </code></pre>
  
  <p>Get all members</p>
  
  <pre><code>[
   {
     "group": "Group A",
     "name": " Jimmy"
   },
  
   {
     "group": "Group B",
     "name": " Johnny"
   },
   {
     "group": "Group C",
     "name": " James"
   }
  ]
  </code></pre>
  
  <p>So how can I arrange these data into something like</p>
  
  <pre><code>groups: ["Group A", "Group B", "Group C"]
  members: {
            Group A: ["Jimmy"],
            Group B: ["Johnny"],
            Group C: ["James"]
           }
  </code></pre>