TS2322: Type '{ text: string; }' is not assignable to type 'string'. while passi-CodePudding

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 => (
    <p>{text}</p>
)

export default function Login(): JSX.Element {
return (
    <div>
        <h1>Login</h1>
        <CircleText text="testing"/>

    </div>
);
}

CodePudding user response：

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

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

CodePudding user response：

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 => (
     <p>{props.text}</p>
 )