title: Dynamic Dropdown from Database
body: <p>I am trying to make a call to my database to get a list of names for the Select component I'm having trouble writing the correct functions I need.
  I can get the dropdown to render but the select box is blank.</p>
  <p>This is the code for the page the part I am trying to get to work is the loadOptions function.</p>
  <p>I am using Next.js, semantic-ui-react and isomorphic-unfetch</p>
  <pre><code>import React from 'react'
  import {Form, Input, Button, TextArea, Header, Icon, Select, Loader} from 'semantic-ui-react'
  import baseUrl from '../../utils/baseUrl'
  import fetch from 'isomorphic-unfetch'
  import {useRouter} from 'next/router'
  import Link from 'next/link'
  
  const typeOptions = [
      {key: 'Positive', text: 'Positive', value: 'Positive'},
      {key: 'Negative', text: 'Negative', value: 'Negative'},
      {key: 'Sick', text: 'Sick', value: 'Sick'},
      {key: 'Cashhandling', text: 'Cash Handling', value: 'Cash Handling'},
  ]
  const positiveOptions = [
      {key: 'AchievedSalesTarget', text: 'Achieved Sales Target', value: 'Achieved Sales Target'},
      {key: 'ExceptionalSalesResults', text: 'Exceptional Sales Results', value: 'Exceptional Sales Results'},
      {key: 'PositiveWorkPerformance', text: 'Positive Work Performance', value: 'Positive Work Performance'},
      {key: 'PositvieLeadershipSkills', text: 'Positvie Leadership Skills', value: 'Positvie Leadership Skills'},
      {key: 'PositiveTeamworkSkills', text: 'Positive Teamwork Skills', value: 'Positive Teamwork Skills'},
  ]
  
  const negativeOptions = [
      {key: 'AbandonmentofShift', text: 'Abandonment of Shift', value: 'Abandonment of Shift'},
      {key: 'Bullying', text: 'Bullying', value: 'Bullying'},
      {key: 'DestructionDamage of Property', text: 'Destruction/Damage of Property', value: 'Destruction/Damage of Property'},
      {key: 'Harassment', text: 'Harassment', value: 'Harassment'},
      {key: 'Fighting', text: 'Fighting', value: 'Fighting'},
      {key: 'GroomingPresentation', text: 'Grooming/Presentation', value: 'Grooming/Presentation'},
      {key: 'Insubordination', text: 'Insubordination', value: 'Insubordination'},
      {key: 'IntimidatingThreating Others', text: 'Intimidating/Threating Others', value: 'Intimidating/Threating Others'},
      {key: 'IntoxicatedonShift', text: 'Intoxicated on Shift', value: 'Intoxicated on Shift'},
      {key: 'Late', text: 'Late', value: 'Late'},
      {key: 'LeavingWorkEarly', text: 'Leaving Work Early', value: 'Leaving Work Early'},
      {key: 'Lessthan3hrsNotice', text: 'Less than 3hrs Notice', value: 'Less than 3hrs Notice'},
      {key: 'NegativeLeadershipSkills', text: 'Negative Leadership Skills', value: 'Negative Leadership Skills'},
      {key: 'NegativeTeamworkSkills', text: 'Negative Teamwork Skills', value: 'Negative Teamwork Skills'},
      {key: 'NegligenceinthePerformanceofDuties', text: 'Negligence in the Performance of Duties', value: 'Negligence in the Performance of Duties'},
      {key: 'PoorWorkPerformance', text: 'Poor Work Performance', value: 'Poor Work Performance'},
      {key: 'PossessionofAlcohol', text: 'Possession of Alcohol', value: 'Possession of Alcohol'},
      {key: 'PossessionofFirearmsExplosives etc', text: 'Possession of Firearms/Explosives etc', value: 'Possession of Firearms/Explosives etc'},
      {key: 'PossessionofIllegalSubstances', text: 'Possession of Illegal Substances', value: 'Possession of Illegal Substances'},
      {key: 'PostingAlteringMaterialonNoticeBoards', text: 'Posting/Altering Material on Notice Boards', value: 'Posting/Altering Material on Notice Boards'},
      {key: 'RefusingtoPerformDutiesImplicitylytotheJob', text: 'Refusing to Perform Duties Implicityly to the Job', value: 'Refusing to Perform Duties Implicityly to the Job'},
      {key: 'Rudeness', text: 'Rudeness', value: 'Rudeness'},
      {key: 'SexualHarassment', text: 'Sexual Harassment', value: 'Sexual Harassment'},
      {key: 'SleepingonShift', text: 'Sleeping on Shift', value: 'Sleeping on Shift'},
      {key: 'TakingUnauthorisedBreaks', text: 'Taking Unauthorised Breaks', value: 'Taking Unauthorised Breaks'},
      {key: 'Theft', text: 'Theft', value: 'Theft'},
      {key: 'UndertheInfluenceofAlcohol', text: 'Under the Influence of Alcohol', value: 'Under the Influence of Alcohol'},
      {key: 'UndertheInfluenceofIllegalSubstances', text: 'Under the Influence of Illegal Substances', value: 'Under the Influence of Illegal Substances'},
      {key: 'UseofProfaneLanguage', text: 'Use of Profane Language', value: 'Use of Profane Language'},
      {key: 'VerbalAbuse', text: 'Verbal Abuse', value: 'Verbal Abuse'},
      {key: 'WilfullyandKnowinglyMakingFalseStatements', text: 'Wilfully and Knowingly Making False Statements', value: 'Wilfully and Knowingly Making False Statements'},
      {key: 'WilfullyViolatingSafteyRules/Practices', text: 'Wilfully Violating Saftey Rules Practices', value: 'Wilfully Violating Saftey Rules Practices'},
  ]
  
  const cashhandlingOptions = [
      {key: 'LargeNegativeVariance', text: 'Large Negative Variance', value: 'Large Negative Variance'},
      {key: 'LargePositiveVariance', text: 'Large Positive Variance', value: 'Large Positive Variance'},
      {key: 'MissingRefundReceipts', text: 'Missing Refund Receipts', value: 'Missing Refund Receipts'},
      {key: 'MissingStaffReceipts', text: 'Missing Staff Receipts', value: 'Missing Staff Receipts'},
      {key: 'ProcessingErrors', text: 'Processing Errors', value: 'Processing Errors'},
  ]
  const sickOptions = [
      {key: 'LeavingWorkEarlySick', text: 'Leaving Work Early Sick', value: 'Leaving Work Early Sick'},
      {key: 'Sick', text: 'Sick', value: 'Sick'},
  ]
  
  function NewPerformance({employees}) {
      const [form, setForm] = React.useState({
          manager: '',
          employee: '',
          date: '',
          type: '',
          incident: '',
          description: '',
      })
      const [isSubmitting, setIsSubmiting] = React.useState(false)
      const [errors, setErrors] = React.useState({})
      const router = useRouter()
  
      const isPositive = form.type === 'Positive'
      const isNegative = form.type === 'Negative'
      const isSick = form.type === 'Sick'
      const isCashhandling = form.type === 'Cash Handling'
  
      React.useEffect(() =&gt; {
          if(isSubmitting) {
              if (Object.keys(errors).length === 0) {
                  createPerformance()
              }
              else {
                  setIsSubmiting(false)
              }
          }  
      })
  
      const createPerformance = async () =&gt; {
          try {
              const res = await fetch(`${baseUrl}/api/performance`, {
                  method: 'POST',
                  headers: {
                      &quot;Accept&quot;: &quot;application/json&quot;,
                      &quot;Content-Type&quot;: &quot;application/json&quot;
                  },
                  body: JSON.stringify(form)
              })
              router.push(&quot;/performance&quot;)
          } catch (error) {
              console.log(error)
          }
      }
  
      const handleChange = (e) =&gt; {
              setForm({
                  ...form,
                  [e.target.name]: e.target.value
              })
          }
  
  
      const handleSelectChange = (e, data) =&gt; {
          setForm({
              ...form,
              [data.name]: data.value
          })
      }
  
      const handleSubmit = (e) =&gt; {
          e.preventDefault()
          let errs = validate()
          setErrors(errs)
          setIsSubmiting(true)
      }
  
      const validate = () =&gt; {
          let err = {}
  
          if (!form.manager) {
              err.manager = 'Manager is required'
          }
          if (!form.employee) {
              err.employee = 'Employee is required'
          }
          if (!form.date) {
              err.date = 'Date is required'
          }
          if (!form.type) {
              err.type = 'Type is required'
          }
          if (!form.incident) {
              err.incident = 'Incident Type is required'
          }
          if (!form.description) {
              err.description = 'Description is required'
          }
          return err
      }
  
      const loadOptions = employees.map(employee =&gt; {
          value: employee.ObjectId 
          text: employee.name
      })
  
      return (
          &lt;&gt;
              &lt;Header as=&quot;h2&quot; block&gt;
                  &lt;Icon name=&quot;add&quot; color=&quot;green&quot;/&gt;
                  Add New Performance Note
              &lt;/Header&gt;
              {
                  isSubmitting
                      ? &lt;Loader active inline ='centered'/&gt;
                      : &lt;Form onSubmit={handleSubmit}&gt;
                          &lt;h3 className=&quot;form-required&quot;&gt;All fields are required&lt;/h3&gt;
                              &lt;Form.Field
                                  control={Input}
                                  error={errors.manager ? {content: 'Please enter a Manager', pointing: 'below'} : null}
                                  name=&quot;manager&quot;
                                  label=&quot;Manager&quot;
                                  placeholder= &quot;Manager&quot;
                                  onChange={handleChange}
                              /&gt;
                              &lt;Form.Field
                                  control={Select}
                                  error={errors.employee ? {content: 'Please enter a Employee', pointing: 'below'} : null}
                                  name=&quot;employee&quot;
                                  label=&quot;Employee&quot;
                                  placeholder=&quot;Employee&quot;
                                  options={loadOptions}
                                  onChange={handleChange}
                              /&gt;
                              &lt;Form.Field
                                  control={Input}
                                  error={errors.date ? {content: 'Please enter a date', pointing: 'below'} : null}
                                  name=&quot;date&quot;
                                  label=&quot;Date&quot;
                                  placeholder= &quot;Date&quot;
                                  type=&quot;date&quot;
                                  onChange={handleChange}
                              /&gt;
                              &lt;Form.Field
                                  control={Select}
                                  label=&quot;Type&quot;
                                  name=&quot;type&quot;
                                  options={typeOptions}
                                  placeholder=&quot;Type&quot;
                                  onChange={handleSelectChange}
                              /&gt;
                              {isPositive &amp;&amp;
                                  &lt;Form.Field
                                      control={Select}
                                      label=&quot;Incident&quot;
                                      name=&quot;incident&quot;
                                      options={positiveOptions}
                                      placeholder=&quot;Incident&quot;
                                      onChange={handleSelectChange}
                                  /&gt;
                              }
                              {isNegative &amp;&amp;
                                  &lt;Form.Field
                                      control={Select}
                                      label=&quot;Incident&quot;
                                      name=&quot;incident&quot;
                                      options={negativeOptions}
                                      placeholder=&quot;Incident&quot;
                                      onChange={handleSelectChange}
                                  /&gt;
                              }
                              {isSick &amp;&amp;
                                  &lt;Form.Field
                                      control={Select}
                                      label=&quot;Incident&quot;
                                      name=&quot;incident&quot;
                                      options={sickOptions}
                                      placeholder=&quot;Incident&quot;
                                      onChange={handleSelectChange}
                                  /&gt;
                              }
                              {isCashhandling &amp;&amp;
                                  &lt;Form.Field
                                      control={Select}
                                      label=&quot;Incident&quot;
                                      name=&quot;incident&quot;
                                      options={cashhandlingOptions}
                                      placeholder=&quot;Incident&quot;
                                      onChange={handleSelectChange}
                                  /&gt;
                              }
                              &lt;Form.Field
                                  control={TextArea}
                                  error={errors.description ? {content: 'Please enter a Description', pointing: 'below'} : null}
                                  name=&quot;description&quot;
                                  label=&quot;Description&quot;
                                  placeholder=&quot;Description&quot;
                                  onChange={handleChange}
                              /&gt;
                              &lt;Link href='/performance'&gt;
                                  &lt;Button color=&quot;red&quot; icon labelPosition=&quot;left&quot; floated=&quot;right&quot;&gt;
                                      &lt;Icon name=&quot;cancel&quot;/&gt;
                                      Cancel
                                  &lt;/Button&gt;
                              &lt;/Link&gt;
                              &lt;br/&gt;
                              &lt;br/&gt;
                              &lt;Form.Field
                                  floated=&quot;right&quot;
                                  control={Button}
                                  color=&quot;green&quot;
                                  icon=&quot;pencil alternate&quot;
                                  content=&quot;Submit&quot;
                                  type=&quot;submit&quot;
                              /&gt;
                          &lt;/Form&gt;
              }
              
          &lt;/&gt;
      )
  }
  
  NewPerformance.getInitialProps = async () =&gt; {
      const res = await fetch(`${baseUrl}/api/employees`)
      const {data} = await res.json()
  
      return {employees: data}
  }
  
  export default NewPerformance
  </code></pre>
  <p>any help would be very much appreciated</p>