CODEWITHSUNDEEP
reactjstypescript
james emanon
james emanon

Reputation: 11837

How to type a react functional component with properties?

So, I have a react functional component ala....

const MyFN = () => {
   // bunch of logic

   MyFN.loaded = someBoolean;

   return <div>just one line</div>
}

MyFN.refresh = () => .......

I attached two attributes onto this function,

How would I type and use it because I am getting errors that

these attributes don't exist on type MyFN?

I tried something like this, but not really working:

type MyFN = React.FunctionComponentElement<any> & {loaded: boolean; refresh: Function};

Upvotes: 2

Views: 1248

Answers (1)

Maxqueue
Maxqueue

Reputation: 2454

So you can use an interface like following:

interface Props {
  property1: string;
  property2: boolean;
}

const MyFN: React.FC<Props> = ({
  property1,
  property2,
}) => {
  return <div>{property1}</div>
}

Upvotes: 4

Related Questions