CODEWITHSUNDEEP
reactjs
Christopher
Christopher

Reputation: 590

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

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.

Upvotes: 3

Views: 3217

Answers (1)

Drew Reese
Drew Reese

Reputation: 203532

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} />;
};

Upvotes: 3

Related Questions