title: Map an Apollo Graphql Dataset in a Functional Component
body: <p>I have created a Dropdown Input Functional Component that I want the option portion to map through my Categories Dataset.</p>
  <p>This is what I have right now.</p>
  <pre><code>const AllCategoriesQuery = gql`
    query {
      allCategories {
        
        name
    }
    }
  
   const {data, loading, error} = useQuery(AllCategoriesQuery)
  
    if(loading) &lt;p&gt;loading...&lt;/p&gt;
  
  { data &amp;&amp;  data.allCategories.map((categories:any) =&gt; (
              &lt;DropDownInput data={categories.name} label='Categories' /&gt;
            ))}
  
  </code></pre>
  <p>However, I know this will just create another Dropdown Component per the number of items in the array.</p>
  <p>This is what my Functional Component looks like.</p>
  <pre><code>import SmallText from '../Texts/SmallText'
  
  interface DropDownInputProps {
      label:String
      required?: boolean
      data?:any
  }
  
  const style ={
    hero:`w-32 mt-2`,
    input:`bg-white w-64 rounded-sm pl-2 py-1 mt-1 outline outline-1 focus:outline-none focus:ring focus:ring-[#0072BC]`
  }
  
  const DropDownInput = (props: DropDownInputProps) =&gt; {
    return (
      &lt;div className={style.hero}&gt;
        &lt;SmallText&gt;{props.label}&lt;/SmallText&gt;
        &lt;select  className={style.input} required&gt;
          
        &lt;option&gt;{props.data}&lt;/option&gt;
          
        &lt;/select&gt;
      &lt;/div&gt;
    )
  }
  
  export default DropDownInput
  </code></pre>
  <p>I am trying to get it to look like the picture attached. Any information would be great! The 2nd one is what I have.</p>
  <p><a href="https://i.stack.imgur.com/3YQMC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3YQMC.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/G7Dru.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G7Dru.png" alt="enter image description here" /></a></p>