How Can i add array of objects in value of select option i use react-select

Viewed 1052

i use react-select multiple and the option is an object but i have problem to post the correct data

this is my code i use formik with react and axios

this my Submit Methode

const handleOnSubmit = (values, actions) => {
        console.log('Form Data',values);
        alert(JSON.stringify(values, null, 2))
        confirmAlert({

            title: 'Confirmer pour soumettre',
            message: 'êtes-vous sûr de le faire.',
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => {

                          axios.post("/prescribes", {
                              drugs: values.drugs,
                              nom: values.nom
                        }
                        )
                            .then(response => {
                                
                                actions.setSubmitting(false);
                                console.log(response.data);
                                actions.resetForm();
                               
                            })
                            .catch(error => {
                                actions.setSubmitting(false);
                                handleServerResponse(false, error.response.data.error);
                            });

                        alert('Click Oui')
                    }
                },
                {
                    label: 'Non',
                    onClick: () => alert('Click Non')
                }
            ]
        });
    };

this is the form using Formik

<Formik
  initialValues={{
    nom: '',
    drugs: [{}],
  }}
  onSubmit={handleOnSubmit}
  validationSchema={formSchema}
>
  {({isSubmitting, values, errors, touched, setFieldValue}) => (
    <Form id="fs-frm" noValidate>
      .....
      <Select
        name="drugs"
        closeMenuOnSelect={false}
        options={drug.map((e) => ({label: e.nom, value: e.id}))}
        isMulti
        values={values.drugs}
        onChange={(
          selectedValue /* check this value before passing to the setFieldValue */
        ) => setFieldValue('drugs', selectedValue)}
      />
      .....
      <Input
        type="text"
        name="nom"
        autoCorrect="off"
        autoComplete="name"
        placeholder="Nom"
        onChange={(
          yourValue /* check this value before passing to the setFieldValue */
        ) => setFieldValue('nom', yourValue)}
        valid={touched.nom && !errors.nom}
        error={touched.nom && errors.nom}
      />
    </Form>
  )}
</Formik>;

this is the console result

enter image description here

And this is the server data , all data are null how can i put the corect data in the formik value the option of select is'nt a string it is an object the finale result it is an array of object

"drugs": [
            {
                "id": null,
                "nom": null,
                "brand": null,
                "indication": null,
                "contraindication": null
            },
            {
                "id": null,
                "nom": null,
                "brand": null,
                "indication": null,
                "contraindication": null
            }
        ]

My form is like this input in the picture enter image description here

My question is how can i add the correct data in the formik value? data it is an array of object how can change the result of console into the result of server ?

0 Answers
Related