3

How can I can prevent errors between 3rd-party libraries when they use the same prop name but expect different data types for that prop?

Example: Material-UI's FormControl component expects the 'error' prop to be a boolean, but I'm using Yup (and Formik) for form validation, which sends a string also labeled 'error'. React is saying this in the console:

"Failed prop type: Invalid prop error of type string supplied to FormControl, expected boolean"

My app works despite the error, but I'd like to get rid of it if possible.

Matthew Masurka
  • 325
  • 3
  • 14

1 Answers1

3

You can parse your error string to bool value using !!

<FormControl {...props} error={!!yourError} />

What is the !! (not not) operator in JavaScript? for more detail.

Sy Tran
  • 378
  • 1
  • 2
  • 13