UI Not updating

[rlawrence89]

My formik form contains a custom textfield component. The text field component reads the formik context and populates based on the field value passed into it. When i invoke setFieldValue(), the value changes in the formik context but the UI element(textField) does not update. If i navigate to the next step in my form and then back the new values are reflected. So i'm assuming my textfield component is not rerendering when i invoke setFieldValue().

How can i get my textbox element to update when i invoke setFieldValue?

Custom Textfield

import { FieldHookConfig, useField } from 'formik'
import React from 'react'


const TextField = ({
  label,
  ...props
}) => {
  const [field, meta, helper] = useField(props)

  return (
    <div className="relative mb-2 flex w-full flex-col px-1 text-gray-800">
      <input
        onChange={(e) => helper.setValue(e.target.value.trim())}
        onBlur={field.onBlur}
        {...props}
        id={props.name}
        placeholder={label.split('-')[0]}
        defaultValue={field.value}
      />
      <label
        className="absolute -top-2.5  left-3 mt-1 inline-block  bg-white text-xs text-gray-400"
        htmlFor={field.name}
      >
        {label}
      </label>
      {meta.error && meta.touched && (
        <p className="px-2 text-sm text-red-500">{meta.error}</p>
      )}
    </div>
  )
}

I then use a simple onclick to set the fieldvalue.

onClick Function

function handleAdaSelect(e) {
    console.log(e)
    formik.setFieldValue('name', e.value)
  }

Here is a sample of how the Textfield is invoked.

<TextField
                label="Name"
                name="name"
                type="text"
                disabled
                className="border-0 focus:outline-none"
              />

[rlawrence89]

Thanks to someone on SO. @khrismuc suggested switching the textfield to use value instead of defaultValue.