CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Bahadır Korumaz
Bahadır Korumaz

Reputation: 183

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

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?

Upvotes: 13

Views: 35314

Answers (6)

DINA TAKLIT
DINA TAKLIT

Reputation: 8388

For me I got this issue InputLabelProps={{ shrink: field.value }} for TextField using material ui so I go this issue:

Warning: Failed prop type: Invalid prop `shrink` of type `string` supplied to `ForwardRef(InputLabel)`, expected `boolean`.

So I fixed the issue by simply getting a boolean value of field.value

InputLabelProps={{ shrink: Boolean(field.value) }}

Here is the complete code:

<Box mt={2}>
  <Controller
    name="password"
    control={control}
    render={({ field }) => (
      <TextField
        type={showPassword ? 'text' : 'password'}
        ...
        {...register('password', {
          required: 'Veuillez insirer votre mot de passe',
          validate: {
            password: (value) => mustBePassword(value),
          },
        })}
        fullWidth
        name="password"
        label="Mot de passe"
        id="password"
        InputLabelProps={{ shrink: Boolean(field.value) }}
        helperText={errors.password?.message}
        error={!!errors.password}
      />
    )}
  />
</Box>

Upvotes: 0

Parham Abolghasemi
Parham Abolghasemi

Reputation: 148

All you need to do is you should convert the error props value to Boolean by making use of !! like below.

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

Upvotes: 0

Sathish Arumugam
Sathish Arumugam

Reputation: 169

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

{!!errorMessages?.myErrorMessage}

Upvotes: 1

arslan
arslan

Reputation: 1144

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

Upvotes: 0

Turtlefight
Turtlefight

Reputation: 10720

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

Upvotes: 17

Nayan shah
Nayan shah

Reputation: 551

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.

Upvotes: 4

Related Questions