Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error when using the `as` prop on <Field>

See original GitHub issue

Background

The component and render props are deprecated in Formik in favor of as: https://github.com/formik/formik/pull/1406

Issue

I tried to use as like this:

import { Field, Form, Formik } from 'formik';
import { TextField } from 'formik-material-ui';

...
  <Field
    as={TextField}
    ...

which produces this error: Screen Shot 2020-07-14 at 4 42 06 AM

Not really sure what’s going on here. Using as with plain Formik and MUI works without errors.

Issue Analytics

State:
Created 3 years ago
Comments:5

Top GitHub Comments

2reactions

dsgriffincommented, Jul 17, 2020

#2618 might be worth following here as it’ll confirm whether the component-being-deprecated note was just a mistake or not. I’m not getting any warnings for it unlike render.

0reactions

cliedemancommented, Sep 12, 2020

Thanks @dsgriffin, I dont think there is anything to be done here in the library

Top Results From Across the Web

Giving error when sending props in react typescript

I'm assuming you're not declaring AddToCart 's props properly (no pun intended). Your code should look something like this:

TextInput: Using error prop function with placeholder prop set ...

Hi @victorbutler, Error prop pops up 'on the go', e.g. text validation. In your case we are manually toggling empty inputs, which are...

Examples - Final Form Docs

Introduces field-level validation functions and demonstrates how to display errors next to fields using ... Independent Error Component (with Render Props).

<Field /> | Formik

When you are not using a custom component and you need to access the underlying DOM node created by Field (e.g. to call...

Troubleshooting | React Navigation

Troubleshooting. This section attempts to outline issues that users frequently encounter when first getting accustomed to using React Navigation.