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.

[Zoom] Not accepting child component

See original GitHub issue

First of all, Thanks for giving this beautiful framework. It has always been a great experience to work with Material-UI.

Today, I updated my project to @material-ui/core@next. Successfully removed all deprecated props. But, failed to solve this issue. Prior to v4 this was working.

[ x ] This is not a v0.x issue.
[ x ] I have searched the issues of this repository and believe that this is not a duplicate.

// Input Field component
const InputField = ({
    field,
    form: { touched, errors },
    ...props
}) => {
    const error = errors[field.name];
    return (
        <TextField
            variant="outlined"
            margin="dense"
            error={touched && error ? true : false}
            helperText={touched && error ? `- ${error}` : null}
            fullWidth
            {...field}
            {...props}
        />
    );
};

Expected Behavior 🤔

Zoom component is not accepting a <Field/> component from Formik as child.

import { Field } from 'formik';

<Zoom in={show}>
         <Field
                 name="title"
                 type="text"
                 variant="outlined"
                 margin="dense"
                 component={InputField}
          />
</Zoom>

Current Behavior 😯

Zoom should be given a <div/> to wrap the <Field/> component

import { Field } from 'formik';

<Zoom in={show}>
           <div>
                  <Field
                            name="title"
                            type="text"
                            variant="outlined"
                            margin="dense"
                            component={InputField}
                   />
           </div>
</Zoom>

Error

I am getting this error in the console.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Transition`.