React/TypeScript Component Mapper

componentMapperFactory.ts

import { createElement } from 'react'

interface MapType {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  [key: string]: (...args: any) => any
}

export default function componentMapperFactory<T extends MapType>(
  contentTypeMap: T
) {
  function factory<K extends keyof T>({
    type,
    props,
  }: {
    type: K
    props: Parameters<T[K]>[0]
  }) {
    const Component = contentTypeMap[type]

    if (!Component) {
      return null
    }

    return createElement(Component, props)
  }

  return factory
}

ProfileDetailsComponentMap.ts

import componentMapperFactory from '<path to>/componentMapperFactory'

import PictureDetail from './PictureDetail'
import CopyDetail from './CopyDetail'
import VideoDetail from './VideoDetail'
import SomeOtherDetailType from './SomeOtherDetailType'

export default componentMapperFactory({
  picture: PictureDetail,
  copy: CopyDetail,
  video: VideoDetail,
  'some-other-detail-type': SomeOtherDetailType
})