Hello I have a web application, and I need to put a multi select in a modal, on the front it appears as it should, but I can't return its value in the input correctly as an array, in case anyone can help me. I'm using formik to manage submission in submit

the value of the second field works as expected, I've tried using useState to insert the value in the array but it didn't work either

Example of how values ​​are returned: alert values

example of how values ​​are expected example

import clsx from 'clsx'
import Axios from "axios";
import React, { useState } from "react";
import 'react-notifications-component/dist/theme.css'
import { Store } from 'react-notifications-component';
import { useFormik, FieldProps, FieldArray   } from 'formik';
import  Select ,  { OptionsType ,  ValueType }  from  "react-select" ;
import { Options, OnChangeValue } from "react-select";

const Modal_cadastra = ({close}) => {

  const cities = [
    {label: 'New York1', value: 'NY'},
    {label: 'Rome', value: 'RM'},
    {label: 'London', value: 'LDN'},
    {label: 'Istanbul', value: 'IST'},
    {label: 'Paris', value: 'PRS'}
];

    const formik = useFormik({
      initialValues: {
        atividades: {
          atividades_id:[],
        },
        descricao: '',
      },
      onSubmit: values => {
        alert(JSON.stringify(values, null, 2));
      },
    });
    return (
        <>
        <form id='kt_modal_add_user_form' onSubmit={formik.handleSubmit} className='form'noValidate>
          <div
            className='modal fade show d-block modal-open'
            id='kt_modal_add_user'
            role='dialog'
            tabIndex={-1}
            aria-modal='true'
          >
            {/* begin::Modal dialog */}
            <div className='modal-dialog modal-dialog-centered mw-650px'>
              {/* begin::Modal content */}
              <div className='modal-content'>
              <div className='modal-header'>
              {/* begin::Modal title */}
              <h2 className='fw-bolder'>Cadastrar tipo mão de obra</h2>

              <div
                className='btn btn-icon btn-sm btn-active-icon-primary'
                data-kt-users-modal-action='close'
                
                style={{cursor: 'pointer'}}
              >    
              </div>     
            </div>
                <div className='modal-body scroll-y mx-5 mx-xl-15 my-7'>
                          <div className='col-lg-10 fv-row'>

                  <Select
                  defaultValue={formik.values.atividades.atividades_id}
                  onBlur={formik.handleChange}
                  isMulti
                  name="atividades_id"
                  id="atividades_id"
                  options={cities}
                  className="basic-multi-select"
                  classNamePrefix="select"  
                  />
                  </div>

          <div className='fv-row mb-7'>

            <label className='fw-bold fs-6 mb-2'>TIPO MÃO DE OBRA</label>
                <input
                  placeholder='Tipo mão de obra'
                  type='text'
                  name='descricao'
                  id='descricao'
                  className={clsx(
                    'form-control form-control-solid mb-3 mb-lg-0',
                  )}
                  autoComplete='off'
                  disabled={false}
                  onChange={formik.handleChange}
                  value={formik.values.descricao}
                  
                />
    
          </div>

                </div>
  
                        <div className='fv-row mb-7'>

            <div className='text-center'>
              <button
                type='reset'
                className='btn btn-light me-3'
                data-kt-users-modal-action='cancel'
                onClick={ close }
              >
                Sair
              </button>
    
              <button
                type='submit'
                className='btn btn-primary'
                data-kt-users-modal-action='submit'
 
              >
                <span className='indicator-label'>Salvar</span>
              </button>
            </div>

             </div>

              </div>
            </div>
          </div>
          <div className='modal-backdrop fade show'></div>
          </form>
        </>
      )
    }
 
export {Modal_cadastra}

CodePudding user response：

This is because Formik checks the actual rendered HTML tag for the name and react-select is not passing the name to the HTML element. It ignores it and uses its own.

Generally you need to bind third party components. You could split this out and then use it in multiple places:

 <Field name="atividades_id">
      {({ field, form, meta }) => (
                <Select
                  {...field}
                  isMulti
                  id="atividades_id"
                  onChange={(values) => form.setFieldValue("atividades_id", values)} {/* Because formiks field.onChange` accepts an event, we need to manually bind this one as Select passes up the new values not nested in event */}
                  getOptionValue={option => cities.value}
                  options={cities}
                  className="basic-multi-select"
                  classNamePrefix="select"  
                  />
     )}
 </Field>