CODEWITHSUNDEEP
reactjstypescriptpreact
kyw
kyw

Reputation: 7545

How to type property 'key' on Preact stateless component

Here is the stateless component:

interface Props {
  children: JSX.Element;
  title: string;
  isHidden: boolean;
}

function TabContent({ children, title, isHidden }: Props): JSX.Element {
  return (
    <section
      id={title}
      hidden={isHidden}
    >
      {children}
    </section>
  );
}

export default TabContent;

And I consume it in a map like so:

createTabContent = tabs => {
    return tabs.map((tab, id) => (
      <TabContent key={id} title={tab.title} isHidden={!(this.state.activeTab === id)}>
        {tab}
      </TabContent>
    ));
  };

But Typescript is complaining the Property 'key' does not exist on type Props.

I have looked into how to type a stateless component in React such as this guide. They all require access to the React module but I'm using Preact..

Upvotes: 0

Views: 617

Answers (1)

Aleksey L.
Aleksey L.

Reputation: 37986

Preact has similar to React's components typings. So you can use one of ComponentType, FunctionComponent, FunctionalComponent:

import { FunctionalComponent } from 'preact';

const TabContent: FunctionalComponent<Props> = ({ children, title, isHidden }) => (
    <section
        id={title}
        hidden={isHidden}
    >
        {children}
    </section>
);

Upvotes: 1

Related Questions