Question

93

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

rated 0 times [ 99] [ 6] / answers: 1 / hits: 25548 / 4 Years ago, mon, april 6, 2020, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dominickmackenziet

Add To Favorites

Follow

Total Points: 583

Total Questions: 101

Total Answers: 117

Location: Saint Lucia

Member since Wed, Feb 8, 2023

1 Year ago

dominickmackenziet questions

1 How to keep user logged after browser closing in React - Express?

Fri, May 20, 22, 00:00, 2 Years ago

1 Why do I get an Unhandled Promise Rejection with await Promise.all

Tue, Jun 1, 21, 00:00, 3 Years ago

1 Convert Maybe< string>[]' to 'string[]

Wed, Apr 7, 21, 00:00, 3 Years ago

1 (0 , _reactRouterDom.useHistory) is not a function

Fri, Feb 12, 21, 00:00, 3 Years ago

1 How to execute API call after entering 3 characters in field?

Fri, Aug 7, 20, 00:00, 4 Years ago

View All

answered 4 Years ago jocelynkarsynr · Accepted Answer

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