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

user_10059467 0
Viewed 19431

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?

reactjs ecmascript-6 javascript
4 Answers

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

user_84114060

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.

user_106407290

actually your error={!!errorMessages.myErrorMessage} executing everytime doesnt matter there is error or not so please use if condition like "errorMessages ? errorMessages.myErrorMessage : void 0 " and also avoid to pass boolean value like true or false ...... Happy coding

user_111519920

It is better to use with optional chaining along with this fix

{!!errorMessages?.myErrorMessage}
user_23122650
Related