CODEWITHSUNDEEP
reactjsformikreact-select
Fathi
Fathi

Reputation: 85

Default value doesn't work with react-select and Formik

I have written code with react-select and Formik. I used useField() for select component, but when I tried to change the default value, I got empty selected value.

const SelectField = ({ name, ...selectProps }) => {
  const [field, meta, helpers] = useField(name)

  return (
    <Select
      value={field.value}
      onChange={(v) => helpers.setValue(v)}
      onBlur={() => helpers.setTouched(true)}
      {...selectProps}
    />
  )
}

then this is my implementation for that component

<SelectField
name="category"
defaultValue={values.category.map((c) => {
  console.log(c)
  return {
    value: c,
    label: c,
  }
})}
closeMenuOnSelect={false}
components={animatedComponents}
isMulti
options={categories.map((c) => {
  return {
    value: c.name,
    label: c.name,
  }
})}
/>

assume that values.category is some value from categories data.

Upvotes: 3

Views: 5232

Answers (1)

Fathi
Fathi

Reputation: 85

change value of that select to field.defaultValue

const SelectField = ({ name, ...selectProps }) => {
  const [field, meta, helpers] = useField(name)

  return (
    <Select
      value={field.defaultValue}
      onChange={(v) => helpers.setValue(v)}
      onBlur={() => helpers.setTouched(true)}
      {...selectProps}
    />
  )
}

Upvotes: 2

Related Questions