TS2322: Type '{ text: string; }' is not assignable to type 'string'. while passing prop

Question

I am trying to pass a prop of type string to a functional component defined in the same file and it is throwing the error:

TS2322: Type '{ text: string; }' is not assignable to type 'string'.

I have been trying different syntaxes, but the error comes out to be the same.

const CircleText = (text: string): JSX.Element => (
    {text}
)

export default function Login(): JSX.Element {
return (
    
        Login
        

    
);
}

user_5811874 · Answer

Props in a react component needs to be an object, notice the {} in the first line below:

const CircleText = ({text: string}): JSX.Element => (
    {text}
)

user_12486838 · Answer

Seems like this also works as well based off of https://www.pluralsight.com/guides/defining-props-in-react-function-component-with-typescript:

interface Title {
     text: string
 }
 const SemiCircleText = (props: Title): JSX.Element => (
     {props.text}
 )

TS2322: Type '{ text: string; }' is not assignable to type 'string'. while passing prop

2 Answers