How to fix: type '{ source: string; }' is not assignable to type 'string'

Question

This has to be a simple fix, but I can't find anything explaining how you resolve this issue. I'm using Next.js and Typescript to make a component display an image and use hooks to modify said image. The problem is, when I pass in a string to the parameter that is typed as string, I get this error: Type '{ source: string; }' is not assignable to type 'string'.ts(2322)

Given this component:

const ImageToggleOnMouseOver = (source: string) : JSX.Element => { ... }

When I try to use it, like so, I get the above error:

return (
  <div>
    <ImageToggleOnMouseOver source='/heads_up.jpg' />
  </div>
);

When provided as source: any it works fine, but shouldn't string also work since I'm expecting to pass in a string after all?

This answer explains how JSX props work (excluding the irrelevant details of React internals) — k.tten
– k.tten, Commented Mar 11, 2022 at 17:46
I think you just have to write either (props) (the param name should not matter) which are of type any and use props.source or use ({source: string}) instead — F. Müller
– F. Müller, Commented Mar 11, 2022 at 17:48

2pichar · Accepted Answer · 2022-03-11 17:53:47Z

1

You need to change the declaration in the component. It is trying to assign the props object of { source: string } to a parameter declared as (source: string). You need to change the function definition to this:

const ImageToggleOnMouseOver = ({source}: {source: string}) : JSX.Element => { ... }

By unpacking the props object and retrieving the source prop, you are able to specify the properties that you need in the function, and you are specifying the type of props.

edited Mar 11, 2022 at 17:53

answered Mar 11, 2022 at 17:48

2pichar

1,3788 silver badges20 bronze badges

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

Comments

Harsh Rohila · Accepted Answer · 2022-03-11 17:47:44Z

1

right type of the component should be

const ImageToggleOnMouseOver = ({source} :{source: string}) : JSX.Element => { ... }

answered Mar 11, 2022 at 17:47

Harsh Rohila

4604 silver badges11 bronze badges

1 Comment

CoderLee Over a year ago

Could you explain more on why that is, please?

Collectives™ on Stack Overflow

How to fix: type '{ source: string; }' is not assignable to type 'string'

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related