React dropdown with options from Firebase realtime db (Formik + materialUI)

Question

I'm having trouble with the dropdown that maps through the data I fetch from the Firebase realtime db and assigns selected value to the Formik form in order to save it to another object in the database.

I have restaurants object with pushId key containing name, city, and id (pushId key), and I have dishes with pushId key containing name, price, id (pushId key), restaurantId (id of the restaurant).

*Here I need another key:value pair that will be for example restaurantId: "-MCvTh91-qHLcy09ZpYm"

I did a fetch of restaurants using useEffect hook:

const [restaurants, setRestaurants] = useState([])

useEffect(() => {
   let restQuery = Firebase.database().ref('restaurants').orderByKey()
   restQuery.once('value').then(function(snapshot) {
      snapshot.forEach(function(childSnapshot) {
         setRestaurants(prevState => [...prevState, childSnapshot.val()])
      })
   })
},[])

But I simply can't map the restaurants array to the dropdown form options and if I select a restaurant save its id to the Formik value

<Formik
  initialValues={{
     name: '',
     price: '',
     restaurantId: '',
  }}
  onSubmit = {(data, {resetForm}) => {
     console.log('submit: ', data)
     resetForm()
  }}>
     {({values, handleChange, handleSubmit}) => (
       <Form onSubmit={handleSubmit}>
          <Field name="name" type="input" as={TextField} /><br/>
          <Field name="price" type="input" as={TextField} /><br/>
          <div>Restaurants:</div>
          <Field type="select" as={Select}>
              {restaurants.map((rest) => 
                 <MenuItem name="restaurantId" value={rest.id}>
                    {rest.name}
                 </MenuItem>
              )}
          </Field>
          <div>
             <Button type="submit">Submit</Button>
          </div>
       </Form>
     )}
</Formik>

This gives mi selection of the restaurants in the dropdown like:

However, when I click on the option the error console throws these warnings and nothing happens

Warning: Formik called `handleChange`, but you forgot to pass an `id` or `name` attribute to your input: undefined
Formik cannot determine which value to update. For more info see https://github.com/jaredpalmer/formik#handlechange-e-reactchangeeventany--void
  

Material-UI: You have provided an out-of-range value `[object Object]` for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are `-MCvTh91-qHLcyO9ZpYm`, `-MCxfsFz6pSaokkbBwpA`, `-MCxg6CB_U4HaCE659Tw`.

I'm stuck on these and anything I try doesn't work.

Not a Formik expert, but the name attribute should go into the <select> equivalent, not the <option> one, afaik. — Chris G
@ChrisG Yup, that solved it. Thanks, is there any way for me to mark your comment as solution. Thanks again! — fedjedmedjed
You can write your own answer and mark it as correct if you want. — Doug Stevenson

fedjedmedjed fedjedmedjed · Accepted Answer · 2020-07-29T11:43:13

As answered by @Chris G in the comments the issue was in placement of the name attribute, it should be in the select element not the option element:

{({values, handleChange, handleSubmit}) => (
   <Form onSubmit={handleSubmit}>
       <Field name="name" type="input" as={TextField} /><br/>
       <Field name="price" type="input" as={TextField} /><br/>
       <div>Restaurants:</div>
       <Field type="select" name="restaurantId" as={Select}>
           {restaurants.map((rest) => 
               <MenuItem key={rest.id} value={rest.id}>
                   {rest.name}
               </MenuItem>
           )}
       </Field>
       <div>
          <Button type="submit">Submit</Button>
       </div>
   </Form>
)}

React dropdown with options from Firebase realtime db (Formik + materialUI)

1 Answers