Passing custom props to a react component using typescript

Question

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; }'.

OliverRadini · Accepted Answer · 2020-08-27 12:52:03Z

2

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.

answered Aug 27, 2020 at 12:52

OliverRadini

6,4941 gold badge26 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing custom props to a react component using typescript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related