3

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>
);
}
eh1412
  • 43
  • 1
  • 2
  • 8

3 Answers3

3

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>
)
Hanchen Jiang
  • 2,514
  • 2
  • 9
  • 20
1

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>
 )
eh1412
  • 43
  • 1
  • 2
  • 8
1
const CircleText = ({ text }: { text: string }): JSX.Element => <p>{text}</p>;

or

interface CircleTextProps {
  text: string;
}

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