title: React hook form - populate select many options array
body: <p>I am trying to use <code>react-hook-form</code> to make a select menu from which multiple options can be chosen.</p>
  
  <p>I have a database array with the records I want to use to populate the select menu.</p>
  
  <p>In <code>formik</code>, I have successfully used this <code>componentDidMount</code> async method to get the records from the database and give them to the select method. I can't get that to work with react hooks.</p>
  
  <pre><code>state = {
        options: [],
      }
  
      async componentDidMount() {
          let options = [];
          await fsDB.collection("abs_for_codes").get().then(function (querySnapshot) {
          querySnapshot.forEach(function(doc) {
              console.log(doc.id, ' =&gt; ', doc.data());
              options.push({
                  value: doc.data().title.replace(/( )/g, ''),
                  label: doc.data().title + ' - ABS ' + doc.id
              });
              });
          });
          this.setState({
              options
          });
      }
  </code></pre>
  
  <p>I've then been able to use a const in my select menu to get the drop down menu items as follows: </p>
  
  <pre><code>options={options}
  </code></pre>
  
  <p>I can't get that to work in react hook form and I'm trying to learn how to <code>useEffect</code>, which I think are supposed to replace this approach.</p>
  
  <p>However, I can't figure out how to start with this.</p>
  
  <p>My current form is in a fragment (so that I can keep using antd in the rest of my front end) that has:</p>
  
  <pre><code>import React from "react";
  import useForm from "react-hook-form";
  import { BrowserRouter as Router, Route } from "react-router-dom";
  import { StateMachineProvider, createStore } from "little-state-machine";
  import { withRouter } from "react-router-dom";
  import { useStateMachine } from "little-state-machine";
  import { fsDB, firebase, settings } from "../../../firebase";
  
  import updateAction from "./updateAction";
  import "./styles.css";
  
  
  createStore({
    data: {}
  });
  
  
  const General = props =&gt; {
    const { register, handleSubmit, errors } = useForm();
    const { action } = useStateMachine(updateAction);
    const onSubit = data =&gt; {
      action(data);
      props.history.push("./ProposalMethod");
    };
  
    return (
  
        &lt;React.Fragment&gt;
          &lt;form onSubmit={handleSubmit(onSubit)}&gt;
            &lt;h2&gt;Part 1: General&lt;/h2&gt;
            &lt;label&gt;
              Title
              &lt;input 
                type="text" 
                name="title"  
                placeholder="The title " 
                ref={register({ required: true })} 
              /&gt;
            &lt;/label&gt;
            {errors.title &amp;&amp; &lt;p id="titleError"&gt;A title is required&lt;/p&gt;}
  
            &lt;label&gt;
              Subtitle
              &lt;input 
                type="text" 
                name="subtitle"  
                placeholder="An optional subtitle" 
                ref={register} 
              /&gt;
            &lt;/label&gt;
  
            &lt;label&gt;Select your fields &lt;/label&gt;
            &lt;Select 
              name="field" 
              placeholder="Select" 
              options={options}
            /&gt;
            &lt;input type="submit" value="next" /&gt;
  
          &lt;/form&gt;
        &lt;/React.Fragment&gt;  
    );
  }; 
  
  export default withRouter(General);
  </code></pre>
  
  <p>Can anyone see where I'm going wrong? </p>
  
  <p>I can't figure out how to replace the <code>componentDidMount</code> with something that works with react-hook-form.</p>