Warning: Failed prop type: Invalid prop `error` of type `string` expected `boolean`

Question

I have a material-ui Textfield component in my ReactJS project.

When I run my code, the warning I got in the console is:

index.js:1 Warning: Failed prop type: Invalid prop `error` of type `string` supplied to `ForwardRef(TextField)`, expected `boolean`.

My component code is below.

 <TextField
   required
   error={errorMessages.myErrorMessage}
   helperText={errorMessages.myErrorMessage}
   value={myTextField}
  />

This code works totally fine but the problem is that it gives a warning message in the console.

I want an error message to be shown only if "errorMessages.myErrorMessage" value is not an empty string.

Is there any ES6 or any other solution to this?

Answer 1

The error property of TextField expects an boolean, but you are passing it a string.

If you want to display an error if errorMessages.myErrorMessage is not an empty string you can check the length of the string, e.g.:

<TextField
   required
   error={errorMessages.myErrorMessage.length > 0}
   helperText={errorMessages.myErrorMessage}
   value={myTextField}
/>

Alternatively you can also use !!errorMessages.myErrorMessage instead of errorMessages.myErrorMessage.length > 0.
This uses of the fact that an empty string is falsy and all other strings are truthy

Answer 2

I think you need to do this

 <TextField
   required
   error={!!errorMessages.myErrorMessage}
   helperText={errorMessages.myErrorMessage}
   value={myTextField}
  />

By this way you are passing false if errorMessages.myErrorMessage is empty string. And the react component expects error to be type boolean, either true or false.