Tengo que call a un método cuando el usuario cambia la lista dropdown , se debe llamar al método handleChange() .

y debería imprimir ambos values . tenemos 2 country de atributo, así como activerequests

 import React from 'react' import { useFormik } from 'formik'; import * as Yup from 'yup'; function YourActionNew() { const initialValues={ country: '', activerequests:'' } const onSubmit=(values:any)=>{ console.log('Form Data',values); } const handleChange = async ( event: any) => { alert("Visited field "+JSON.stringify(event.target.values)); }; const validationSchema = Yup.object({ country:Yup.string().required('Required'), activerequests:Yup.string().required('Required') }) const formik = useFormik({ initialValues, onSubmit, validationSchema }); console.log("Visited field "+JSON.stringify(formik.values)); return ( <div> <form > <div className='form-control'> <label htmlFor='country'>Country</label> <input type='text' id='country' name='country' onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.country}/> {formik.touched.country && formik.errors.country? <div className='error'>{formik.errors.country}</div>:null} </div> <div className="form-control"> <label htmlFor="activerequests">Active Requests</label> <select name="activerequests" onChange= {formik.handleChange} onBlur={formik.handleBlur} value={formik.values.activerequests}> <option value="All" onChange={formik.handleChange}>All </option> <option value="YES" onChange={formik.handleChange}>Yes </option> <option value="NO" onChange={formik.handleChange}>No</option> </select> </div> <button type="submit">Submit</button> </form> </div> ) } export default YourActionNew

cuando en la etiqueta de select escribo onChange= {(e)=>{handleChange(e)}} en lugar de onChange={formik.handleChange} y luego se llama al método pero se imprime undefined .

cuál es mi requisito cuando el usuario cambió los valores en la lista dropdown , debe imprimir ambos valores. Tengo que pasar ambos valores en API .