title: React Hooks: how to properly map an array with nested arrays and objects inside a select element?(new coder)
body: <p>The objective is to create a select element that maps out all the names as drop downs with react hooks, for some reason it's only rendering the first element and getting undefined errors, any code references can be provided</p>
  
  <pre><code>import React from 'react';
  import styles from './style.css'
  
  const Traveler = () =&gt; {
      const travelers = [
          { title: "What kind of traveler are you?", name: [
              "Adrenaline Addicts", "Culture Lovers", "Aquatic adventures", "Beach enthusiasts", "Adventure seekers",
              "Party hoppers", "Motor fans"
          ] }
      ]
  
      return (
          &lt;React.Fragment&gt;
              &lt;select type="text" name="Transportation" className={styles.select}&gt;
                  &lt;option value="Transportation" className={styles.field} value={travelers[0].title}&gt;&lt;/option&gt;  
                  { travelers.map((item, index) =&gt; {
                      return(
                          &lt;option&gt;{item[0].name[index]}&lt;/option&gt;
                      );
                  })
              }
              &lt;/select&gt; 
  
          &lt;/React.Fragment&gt;
      );
  
  }
  
  export default Traveler;
  ````
  </code></pre>