Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

ReactJS

May 5, 2023

How to Bind React-select with Formik

Like a normal input, we can’t bind formik’s handleChange to React-select’s onChange directly since it gives selectedValue object in the call back parameter instead of an event. So, we need to utilize formik’s setFieldValue instead as per below example:

<Formik {...initialValues}> 
{({ values, setFieldValue }) => 
( <ReactSelect name="selectValue" value={values.selectValue} 
options={optionsList} onChange={(selectedOption) => 
{ setFieldValue("selectValue", selectedOption); }} /> )} 
</Formik>;

Though, it’s worth noting that formik is no longer being maintained as per this discussion: https://github.com/jaredpalmer/formik/issues/3613