React/NextJs - How to pass props to array/object of components

Question

I have made a simple component mapper, it is working, but I don't know how to pass the props onto the To Be Returned Component. Here's my current codes:

In my sample, I would like to render and pass props on to the <SampleComponent/> by using mapComponent('employee__create', component.props)

mapComponent.jsx

import SampleComponent from './SampleComponent';
import SampleComponentTwo from './SampleComponentTwo';

const component_list = {
    employee: {
        create: <SampleComponent />,
        update: <SampleComponentTwo />,
    },
};

const mapComponent = (path, props) => {
    let to_render = component_list;

    path.split('__').forEach((path) => {
        to_render = to_render[path];
    });

    return to_render;
};

export default mapComponent;

PersistentWindow.jsx

import mapComponent from '../../samples/mapComponent';

const PersistentWindow = (props) => {

    const component_path = props.component.path //equals to 'employee__create';

    return (
        <div {...props.window}>
            {mapComponent(component_path,  props.component.props)}
        </div>
    );
};

export default PersistentWindow;

I can pass and use the props when component_list is declared inside mapComponent as shown in the sample below. But I think that will also unwantedly pass the props to all other Components on the list.

const mapComponent = (path, props) => {
    const component_list = {
        employee: {
            create: <SampleComponent {...props}/>,
            update: <SampleComponentTwo {...props}/>,
        },
    };

    let to_render = component_list;

    path.split('__').forEach((path) => {
        to_render = to_render[path];
    });

    return to_render;
};

export default mapComponent;

How do I do this? or any better implementations?

P.S. if you can also think of better title for this post will be much appreciated, so it may reach right audiences.

The .split creates an array of strings that you then .forEach, you overwrite to_render twice, and return the last set value... it's unclear if you are mapping anything, or what you want the expected result to be. Can you clarify a bit more what you are expecting the rendered result to be? Are you basically just string splitting the path to get to the nested component you actually want to render? — Drew Reese
– Drew Reese, Commented Aug 20, 2021 at 4:42
As I've stated above, I want to render <SampleComponent /> along with its props into the <PersistentWindow/> component by using mapComponent('employee__create', component.props). the .split + forEach portion there ultimately ends up selecting <SampleComponent/> which is to be returned on the <PersistentWindow/> component — Christopher
– Christopher, Commented Aug 20, 2021 at 4:48

Drew Reese · Accepted Answer · 2021-08-20 04:49:08Z

If I understand your question and code, you are string splitting a path and "walking" the component_list object until you get to the component you want to return and render... and you are wanting to pass the specified props object.

Start by not using JSX literals in the component list, instead use a reference to the component.

const component_list = {
  employee: {
    create: SampleComponent,
    update: SampleComponentTwo,
  },
};

Next, instead of to_render give the component a valid React component name, i.e. using PascalCase. When you complete the string split you should hopefully be at the component you want to render, now you should instantiate it and pass the props and return the JSX.

const mapComponent = (path, props) => {
  let Component = component_list;

  path.split('__').forEach((path) => {
    Component = Component[path];
  });

  return <Component {...props} />;
};

Collectives™ on Stack Overflow

React/NextJs - How to pass props to array/object of components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related