How can i create custom component dynamically by string

Question

Hi I need to help with my method for creating list of custom components. This method has same logic for 4 components (Package,Theme,Part, Knowledges). Only one thing i have to change is component which i pushing to list.

I tried something like this, but this throw weird error:

index.js:1 Warning: <Package /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

export class SubjectDashboardUtils {
    /**
     * Make list of Components of certain type
     * @param {[]} list
     * @param {Number} itemType
     * @return {any} items
     */
    static makeListOfTypedItems(list: [], itemType: string): any {
        console.log(list);
        console.log(itemType);
        const items = [];
        list.forEach((item, key) => {
            const subjectPartComponent = React.createElement('Package', {key: key, data: item}, itemType);
            items.push(subjectPartComponent);
        });
        return items;
    }
}

Akxe · Accepted Answer · 2020-04-30 14:27:04Z

1

You should not use strings are they are not treed shakable. Here is a type-safe solution.

export type TypedItems = Package | Theme | Part | Knowledges;

export class SubjectDashboardUtils {
    static makeListOfTypedItems<T extends TypedItems>(list: any[], itemType: {new(): T; }): (T)[] {
        console.log(list);
        console.log(itemType);
        const items = [];
        return list.map((data, key) => {
            return React.createElement(itemType, {key, data})
        });
    }
}


// Use it like so

const packages = SubjectDashboardUtils.makeListOfTypedItems(['data'], Package);
const parts = SubjectDashboardUtils.makeListOfTypedItems(['data'], Part);

The benefit of this is inheriting type safety. You could probably even have a type of list not being any, but for that, I do not know enough of React.

edited Apr 30, 2020 at 14:27

answered Apr 30, 2020 at 14:19

Akxe

11.8k6 gold badges43 silver badges80 bronze badges

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

3 Comments

Young L. Over a year ago

I am unable to make this work :/ especially part with export type.... I am getting this error ``` Argument of type 'typeof Package' is not assignable to parameter of type 'Package' ```

Young L. Over a year ago

Type 'typeof Package' is missing the following properties from type 'ThemePartKnowledge': state, componentDidUpdate, render, context, and 4 more.  TS

Akxe Over a year ago

I have updated the types, I had an error there for a minute or two

Jacob · Accepted Answer · 2020-04-30 14:32:20Z

0

React.createElement needs the component class/function to create components, not a string. Strings are only for creating DOM elements, and those must start with a lowercase letter.

Do this instead:

import Package from '...';

React.createElement(Package, ...);

If you need to parameterize the creation of elements, you can just pass component types around like any other variable. For example, if you wanted to change makeListOfTypedItems to use a dynamic component type, it could look something like this (sorry, don't get your original code's intent, so they might not be what you meant):

import { ComponentType } from 'react';

// ...

export class SubjectDashboardUtils {
  static makeListOfTypedItems<
    DataType, 
    Cmp extends ComponentType<{ data: DataType }>
  >(list: Array<DataType>, DynamicComponent: Cmp) {
    return list.map((item, key) => <DynamicComponent key={key} data={item}/>);
  }
}

This would be called like:

SubjectDashboardUtils.makeListOfTypedItems(items, Package);

edited Apr 30, 2020 at 14:32

answered Apr 30, 2020 at 14:09

Jacob

79k24 gold badges159 silver badges245 bronze badges

5 Comments

Young L. Over a year ago

This is not solving my problem. in method above i am getting itemType by parameter. This is string (Package,Theme,Part,Knowledge) and i have to create component with this string

Young L. Over a year ago

is there any other way how to do this?

Young L. Over a year ago

i know i could use switch but i hoped there is better way

Jacob Over a year ago

Why do you have to create with a string? Can't you pass the component type as a parameter instead?

Jacob Over a year ago

I haven't tested this yet, but something like my edit could work

Collectives™ on Stack Overflow

How can i create custom component dynamically by string

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related