Render components dynamically with react and typescript

Question

I have a set of components to render for a multi step form. I'm trying to create a array with all the components then use a map() to include the components.

const stepComponents = [
  <SelectCoach/>,
  <SelectDate/>,
];


<Steps>
  {stepComponents.map((component) => {
     return <component/>
  })}
</Steps>

But I get an type error,

Property 'component' does not exist on type 'JSX.IntrinsicElements'.

Any idea how to fix this?

Thanks you

Answer 1

You can simply use ElementType for the data type and use the name of the components instead of using tags:

import { ElementType } from 'react';

const stepComponents: ElementType[] = [
  SelectCoach,
  SelectDate,
];


<Steps>
  {stepComponents.map((component) => {
     return <component/>
  })}
</Steps>

It is explained here: Dynamic Tag Name Props in React (with TypeScript)

Answer 2

Use below code it should work. In you code you are returning in jsx format, but already in your array it's in the jsx format so no need to convert it into jsx syntax again.

<Steps>
  {stepComponents.map((component) => {
     return component
  })}
</Steps>