Formik called `handleChange`, but you forgot to pass an `id` or `name` attribute to your input:undefined

[abhiburk]

I started using formik in react-native and a warning is shown to me whenever I try typing something.

`const CustomInputComponent = ({ field, form: { touched, errors, handleBlur, handleChange, values }, ...props }) => { return (

) }`

and the field

<Field placeholder='Password' name='password' icon='key' component={CustomInputComponent} />

[msageryd]

I had this problem as well. It turned out thet TextInput didn't like to get all of the field properties. I think your code will work if you remove {...field} from your Input properties.

I didn't dig any further, so I don't know the actual reason to the problem. Anyway, I don't think there are any important stuff in the field variable that you'd want to send to your Input (apart from "name", which you access via field.name anyway). It also has value, but you are using values[field.name] anyway.

[studouglas-scx]

It seems like it's specifically the onBlur property from field that's the issue. If you still need some properties from field (as we did) you can just pass {..._.omit(field, 'onBlur')} to the input component.

[victors1681]

On React Native we use onChangeText instead onChange and this is making this warning show up.. do <TextInput {..._.omit(field, 'onChange')} {...props} ..../> to avoid passing this method

[rabrenio]

Not sure whats causing this, but we can use setFieldTouched as a workaround. <Component onBlur={() => setFieldTouched(fieldName)} />

[MaciejReimann]

I just got rid of that warning by replacing as with component:

<Field placeholder='Password' name='password' icon='key' as={CustomInputComponent} />

https://formik.org/docs/api/field#as

[gcboaventura]

Can anyone tell me where am I wrong?

If I just pass field.onChange or field.onChange(event), the input hangs and loses focus.

export const MaskInput: FC<Props> = ({
    className,
    isLoading,
    onChange,
    mask,
    ...props
}): JSX.Element => {
    const [field, meta] = useField(props.name || 'name')

    const hasError = !!(meta.touched && meta.error)

    const maskHelper = new HandleMaskHelper()

    const TextMaskCustom = forwardRef((props: any, ref: any): JSX.Element => {
        const { component: Component, ...other } = props
        return <IMaskInput {...other} mask={maskHelper.handle(mask)} inputRef={ref} overwrite />
    })

    return (
        <>
            <TextField
                {...field}
                fullWidth
                size="small"
                error={hasError}
                value={field.value}
                className={className}
                onChange={(event: ChangeEvent<any>) =>
                    field.onChange({ ...event, target: { ...event.target } })
                }
                InputProps={{
                    inputComponent: TextMaskCustom
                }}
                {...props}
            />
            {hasError && <ErrorMessage>{meta.error || 'Erro'}</ErrorMessage>}
        </>
    )
}

[vuksharu93]

I manage to resolve this by sending only value from field, not the entire field object

[RyanClementsHax]

I encountered this same issue. What I found fixed it was calling the event handler with the name of the field to get the actual event handler

<InputField
    type="text"
    value={field.value}
-    onChangeText={field.onChange}
+    onChangeText={field.onChange(name)}
-    onBlur={field.onBlur}
+    onBlur={field.onBlur(name)}
/>