Set props to Component coming from an Object

Question

I'm trying to chain a React Components to Object by passing my imported Components to them as Props.

const [showComponent, setShowComponent] = useState([
    { cId: 1, componentName: <ContactDialogAddresses />, title: 'Adresse', render: true },
    { cId: 2, componentName: <ContactDialogPhone />, title: 'Rufnummer', render: true },
]);

return(
    {showComponent.map((component, index) => {
        if (component.render) {
            return (
                <>
                    <span>{index}</span>
                    {component.componentName}
                </>
            );
        }
    })}
)

How can I reimplement props like this?

// I need to pass the props during the mapping because I need a unique identifier for each rendert component later on.

 <ContactDialogAddresses
   key={component.cId}
   onShowComponent={handleShowComponent}
   cIndex={index}
 />

Quick Idea.. is it possible to use React.cloneElement for this ? — K.Kröger, Apr 27 '21 at 11:52
Maybe you want to use createElement? https://reactjs.org/docs/react-api.html#createelement — Nikita Chayka, Apr 27 '21 at 12:10
@Andy Why would you not implement this scenario via. `React.cloneElement` ? — K.Kröger, Apr 27 '21 at 12:30

Nikita Chayka · Accepted Answer · 2021-04-27T12:34:53.767

One of the options would be to do component creators/renderers (basically functions) in your state, rather than directly components.

Something like this:

const [showComponent, setShowComponent] = useState([
   { cId: 1, componentRenderer: (props) => { return (<ContactDialogAddresses {...props} />)}, title: 'Adresse', render: true },
   { cId: 2, componentRenderer: (props) => { return (<ContactDialogPhone {...props} />) }, title: 'Rufnummer', render: true },
]);

return(
    {showComponent.map((component, index) => {
        if (component.render) {
            return (
                <>
                    <span>{index}</span>
                    {component.componentRenderer({someProp:'someValue'})}
                </>
            );
        }
    })}
)

Another option could be using variables - important they should be capitalized (and do not do < /> in componentName in your state):

const [showComponent, setShowComponent] = useState([
   { cId: 1, componentName: ContactDialogAddresses, title: 'Adresse', render: true },
   { cId: 2, componentName: ContactDialogPhone, title: 'Rufnummer', render: true },
]);

return(
    {showComponent.map((component, index) => {
        if (component.render) {
            const TargetComponent = component.componentName
            return (
                <>
                    <span>{index}</span>
                    <TargetComponent x="y"/>
                </>
            );
        }
    })}
)

Otherwise you could use createElement - https://reactjs.org/docs/react-api.html#createelement

Actually there is good thread here - React / JSX Dynamic Component Name with some good discussions there, so kudos goes there

Set props to Component coming from an Object

How can I reimplement props like this?

1 Answers1