Render components dynamically with react and typescript-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

You've already instantiated the components in your stepComponents array, and you don't need to do so again when rendering them through the map:

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

or more simply

<Steps>
  {stepComponents}
</Steps>

CodePudding user response：

I think the problem is in your array

const stepComponents = [
  SelectCoach,
  SelectDate,
];


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

CodePudding user response：

You should just return component, without using <>.

Working example here: https://codesandbox.io/s/hopeful-varahamihira-35etf1?file=/src/App.tsx

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

But if you don't need to map over them, then I would suggest not using map at all and just use:

<Steps>
  {stepComponents}
</Steps>