react typescript component set prop with condition

Question

I'd like to set the component's prop when the variable's value defined. Below is my current code.

import Cropper from 'react-easy-crop'
...
interface State {
 ...
  coverFile: File | null;
  ...
}
class Test extends React.PureComponent<Props, State> {
  state = {
    ...
    coverFile: null,
    ...
  };
...
const file = event.target.files;
self.setState({
              coverFile: file[0],
            });

<Cropper
  image={coverFile?coverFile:undefined}
  ...
/>

And this is the error message.

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<CropperProps>): Cropper', gave the following error.
    Type 'null | undefined' is not assignable to type 'string | undefined'.
      Type 'null' is not assignable to type 'string | undefined'.
  Overload 2 of 2, '(props: CropperProps, context?: any): Cropper', gave the following error.
    Type 'null | undefined' is not assignable to type 'string | undefined'.ts(2769)

How can I solve this problem?

I used react-easy-crop import Cropper from 'react-easy-crop' And this is image type: (JSX attribute) image?: string | undefined — Cardoso
– Cardoso, Commented May 27, 2021 at 3:42
Type 'null' is not assignable to type 'string | undefined' — Cardoso
– Cardoso, Commented May 27, 2021 at 3:52
At least show the assignment of coverFile. That seems to be of importance — im_baby
– im_baby, Commented May 27, 2021 at 3:55
I added some code in the question, please have a check and let me know which part of code do you want more. — Cardoso
– Cardoso, Commented May 27, 2021 at 4:00

Sohaib · Accepted Answer · 2021-05-27 04:05:19Z

3

This explains your error message

Type 'null | undefined' is not assignable to type 'string | undefined'.

Cropper's image prop expects a string or undefined but you are passing null or undefined

Did you initialise coverFile as null? If so, you can set it to undefined to silence the error

Update: If you can't figure out where the null is coming from you can simply do this:

<Cropper
  image={coverFile || undefined}
  ...
/>

edited May 27, 2021 at 4:05

answered May 27, 2021 at 3:46

Sohaib

11.4k9 gold badges35 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Cardoso Over a year ago

The result is same.

No overload matches this call.   Overload 1 of 2, '(props: Readonly<CropperProps>): Cropper', gave the following error.     Type 'null | undefined' is not assignable to type 'string | undefined'.       Type 'null' is not assignable to type 'string | undefined'.   Overload 2 of 2, '(props: CropperProps, context?: any): Cropper', gave the following error.     Type 'null | undefined' is not assignable to type 'string | undefined'.

Sohaib Over a year ago

You need to post more code. How do you assign coverFile? It seems your coverFile is still null

Cardoso Over a year ago

Yes, at first the coverFile value is null. After open the file from the dialog, it will be set. Which part of the code do you want?

Sohaib Over a year ago

Use undefined instead of null

Cardoso Over a year ago

Type 'null' is not assignable to type 'string | undefined'.

marzzy · Accepted Answer · 2021-05-27 04:01:05Z

0

First, you don't need to use (JSX attribute) image?: string | undefined you can write image?: string because, with strict null checks, an optional parameter automatically adds | undefined

Second, based on react-easy-crop document it needs to image or video (at least one of them) to be required, so if there was an undefined image, you need to pass a valid video parameters I think this could help :

 {coverFile && (
  <Cropper
   image={coverFile}
   ...
 />)
 }

answered May 27, 2021 at 4:01

marzzy

79411 silver badges24 bronze badges

1 Comment

Cardoso Over a year ago

Please have a look at @Sohaib's answer. It works.

Ihor Konovalenko · Accepted Answer · 2022-02-02 13:51:29Z

0

The image props for Cropper stands for string. And it seems to be an error with the code as following that you mentioned.

<Cropper
  image={coverFile?coverFile:undefined}
  ...
/>
It would be fine by replacing it by
  <Cropper
    image={coverFile || undefined}
    ...
  />
or
  {
  image ?
  <Cropper
    image=coverFile
    ...
  /> : ''
  }

Hope your success

edited Feb 2, 2022 at 13:51

Ihor Konovalenko

1,4172 gold badges19 silver badges24 bronze badges

answered Feb 1, 2022 at 14:59

StormyTalent

2472 silver badges14 bronze badges

Collectives™ on Stack Overflow

react typescript component set prop with condition

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related