Search code examples
reactjsmaterial-uiformikformik-material-ui

Console Warning Due to passing additional irrelevant props to material ui Autocomple via Formik Field

The Warning I am receiving is enter image description here

I am attaching a code sandbox link reproducing this warning. Can someone explain why this warning is occurring and how to get rid of it: https://codesandbox.io/s/cool-bogdan-6lyxs?file=/src/App.js

Solution

  • The warning is not really related to the formik Field, but the implementation of your FormikAutocomplete component.

    In your FormikAutocomplete you're destructuring the props:

    const FormikAutocomplete = ({ textFieldProps, ...props }) => { ...

    Therefore the props object will include istesting with the value true and test with your testFunc. You are than spreading the props object into the props of material uis Autocomplete component, which doesn't know how to handle those props and is probably passing them on to the html element which is rendered (a div in this case). Your browser is than complaining about these props on the div, because they don't belong there.

    The fix would be to only pass those props along to the Autocomplete which are propperly handled by it or destructure the props out of your props object which shouldn't be passed along.

    You could for example change the code in your FormikAutocomplete to

    const FormikAutocomplete = ({ textFieldProps, istesting, test, ...props }) => {
...

  if (istesting) {
    test();
  }
...
}
``