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>
            )}
        />)
}

Can you create a codesandbox with minimal reproducible code? — rzwnahmd
– rzwnahmd, Commented Apr 13, 2020 at 15:16
I don't any code in listItem.js, maybe you forgot to save the file — rzwnahmd
– rzwnahmd, Commented Apr 13, 2020 at 15:40
soory i forgot,now i have saved it codesandbox.io/s/angry-galois-cy8q4 — enoch
– enoch, Commented Apr 13, 2020 at 15:50

rzwnahmd · Accepted Answer · 2020-04-13 16:38:10Z

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>

answered Apr 13, 2020 at 16:38

rzwnahmd

1,0825 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Formik handle an array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related