Render component by function pointer and pass props

Question

I have an array of pointers, componentArray, but I'm struggling to figure out the syntax to both render them in ParentComponent



function Component1() {
    return(
        <h1>Hello from Component 1</h1>
    );
}

function Component2() {
    return(
        <h1>Hello from Component 2</h1>
    );
}

export const componentObject = [{
    name: "Component1",
    pointer: Component1
}, {
    name: "Component2",
    pointer: Component2
}];

function ParentComponent(props) {
    return (
        <div>
            {Object.entries(componentObject).map((ChildComponent) => (
                <span>{ChildComponent[1]() DOESNOTWORKPROP="Test"}</span>
            ))}
        </div>
      );
};

The above will work if you remove DOESNOTWKRPROP="TEST", but will not work when trying to add props to the children.

Try something like componentArray.map(Child => <Child prop={value} />). — morganney
– morganney, Commented Oct 30, 2022 at 15:00

rocambille · Accepted Answer · 2022-10-30 15:36:40Z

1

Here you should not call directly ChildComponent as a function. You should use the "tag syntax", as follows:

function ParentComponent(props) {
    return (
        <div>
            {componentObject.map(({ pointer: ChildComponent }) => (
                <ChildComponent DOESWORKPROP="Test" />
            ))}
        </div>
      );
};

Note that the variable used in the tag should use PascalCase for react to accept it, thus the renaming as ChildComponent after destructuring pointer.

Here is the related documentation: https://reactjs.org/docs/jsx-in-depth.html#choosing-the-type-at-runtime

Bonus: you should provide a prop key to element generated with map. Here you can use the name of your components ;)

<ChildComponent key={ChildComponent.name} DOESWORKPROP="Test" />

Going further, when you call the function directly here:

<span>{ChildComponent[1]() DOESNOTWORKPROP="Test"}</span>

Your component is executed immediately and returns static JSX, as if your code became:

<span>{<h1 DOESNOTWORKPROP="Test">Hello from Component 1</h1>}</span>

That why your props don't apply: they are passed to a static JSX element, not to the dynamic rendering process of your component

edited Oct 30, 2022 at 15:36

answered Oct 30, 2022 at 15:16

rocambille

16.2k12 gold badges54 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Grant Curell Over a year ago

Sincere apologies - in an effort to simplify my question and make it more legible I changed the object to an array not realizing that was actually key to the problem. I have updated my original question to reflect that. Sorry again

rocambille Over a year ago

I adapted my answer to your edited question ;)

Asraf · Accepted Answer · 2022-10-30 15:27:30Z

1

Since the componentObject is an array so you just need to use map().

And try this way:

function ParentComponent(props) {
    return (
        <div>
            {componentObject.map(({ pointer }) => {
                const ChildComponent = pointer;
                return <ChildComponent DOESNOTWORKPROP="Test" />
            })}
        </div>
      );
};

edited Oct 30, 2022 at 15:27

answered Oct 30, 2022 at 15:04

Asraf

1,3695 silver badges13 bronze badges

1 Comment

Grant Curell Over a year ago

Sincere apologies - in an effort to simplify my question and make it more legible I changed the object to an array not realizing that was actually key to the problem. I have updated my original question to reflect that. Sorry again

Collectives™ on Stack Overflow

Render component by function pointer and pass props

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related