Formik handle an array of objects

Question

i'm trying to implement array of objects of a structure like this

selectedItems: [
                  {
                    _id: ""
                  }
              ]

what I want to do is when the user selects for example 2 or more _id, I want the structure to be like this

[
   {
      _id: "123"
   },

   {
      _id: "456"
   },

   {
      _id: "789"
   },
]

but what I currently get with my implementation is an array of _id that will contain several items like this

[
   {
      _id: ["123", "456", "789"]
   }
]

I followed the documentation of formik which suggests to implement this solution when we have an array of objects. my implementation

const GetSelectedItems = () => {
    return (
        <Formik
            initialValues={{
                selectedItems: [{
                    _id: ""
                }]
            }}
            onSubmit={values => {
                console.log(values)
            }}
            render={({values, handleChange}) => (
                <Form>
                    <FieldArray
                        name="selectedItems"
                        render={arrayHelpers => (
                            <div>
                                {values.selectedItems && values.selectedItems.length > 0 ? (
                                    values.selectedItems.map((item, index) => (
                                        <div key={index}>
                                            <Field as="div"
                                                   name={`selectedItems${[0]}._id`}
                                            >
                                                <select name={`selectedItems.${[0]}._id`}
                                                        multiple={true}
                                                        className="form-control"
                                                        value={item._id}
                                                        onChange={event => {
                                                            handleChange(event);
                                                        }}
                                                >
                                                    <option value={values.selectedItems._id}>
                                                        Choisir items
                                                    </option>
                                                    {itemList(items)} // data from api
                                                </select>
                                            </Field>
                                        </div>
                                    ))
                                ) : null}
                                <div>
                                    <div>
                                        <button type="submit">Submit</button>
                                    </div>
                                </div>
                            </div>
                        )}
                    />
                </Form>
            )}
        />)
}

Answer 1

You don't need to give a name prop to select's option components, just remove it and your code will run as expected:

// Removed name props from this component
<option key={option._id} value={`${option._id}`}>
    {option._id}
</option>