CODEWITHSUNDEEP
reactjstypescript
habbahans
habbahans

Reputation: 132

Passing custom props to a react component using typescript

I am pretty new to TypeScript and I am wondering if someone can give me an example of this React component converted to TypeScript:

const Message = ({from, text}) => (
  <div>
    <p>{text}</p>
    <p>from: {from}</p>
  </div>  
);

I have tried somethinig like this:

const Message: React.FC = ({from, text}) => (
  <div>
    <p>{text}</p>
    <p>from: {from}</p>
  </div>  
);

but it gives me the error: Property 'propertyName' does not exist on type '{ children?: ReactNode; }'.

Upvotes: 0

Views: 972

Answers (1)

OliverRadini
OliverRadini

Reputation: 6467

interface Props {
  from: string;
  to: string;
}

const Message: React.FC<Props> = ({from, text}) => (
  <div>
    <p>{text}</p>
    <p>from: {from}</p>
  </div>  
);

You just need to let Typescript know what the props for the component are.

Upvotes: 2

Related Questions