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
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>
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)
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>
I think the problem is in your array
const stepComponents = [
SelectCoach,
SelectDate,
];
<Steps>
{stepComponents.map((component) => {
return <component/>
})}
</Steps>
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>