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

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

    </div>
);
} 

Vanwinkle

Answer 1

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>
)

Sidky

Answer 2

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>
 )

Vanwinkle

Answer 3

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

or

interface CircleTextProps {
  text: string;
}

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

Anderer