Passing interface type to object parent

March 14, 2022

Im trying to pass the interface type to a Object returning jsx components, but i dont want to explicitly specify the type for each component. how can i do this.

->>>

interface blockProps {
  children: any;
}

const block: blockProps = {
  h1: ({ children }: any) => (
    <h1 className="my-3 text-6xl font-bold md:text-8xl md:my-4">{children}</h1>
  ),
  h2: ({ children }: any) => (
    <h2 className="my-3 text-5xl font-bold md:text-7xl md:my-4">{children}</h2>
  ),
  h3: ({ children }: any) => (
    <h3 className="my-3 text-4xl font-bold md:text-6xl md:my-4">{children}</h3>
  ),
  h4: ({ children }: any) => (
    <h4 className="my-3 text-3xl font-bold md:text-5xl md:my-4">{children}</h4>
  ),
  blockquote: ({ children }: any) => (
    <blockquote className="relative p-4 my-8 text-xl italic border-l-4 bg-neutral-100 text-neutral-600 border-neutral-500">
      <p>{children}</p>
    </blockquote>
  ),
};

>Solution :

You can define your types like this:

type possibleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'blockquote';

interface blockProps {
  children: any;
}

type blockMap = {
  [key in possibleTags]: (props: blockProps) => React.ReactElement<any, any>;
};

I had a little fun and here :): https://stackblitz.com/edit/react-ts-xj27j6?file=index.tsx