How to use variable to create react element

Question

I want to be able to attach react components to a HTML page without having to hardcode all of them.

If I have a function to do most of it, but I don't know how to use the component variable:

function setupPanel(element: HTMLOrSVGElement, component: Object)
{
    let params = {};

    // This is hard-coded and so wrong
    const react_type = <NotesPanel {...params} />;

    // I want to be able to use the component type passed in. 
    //  const react_type = <component {...params} />;

    render(
        react_type,
        // @ts-ignore: you not helping here.
        element
    );
}

How do I change the code so that the react element uses the variable passed in to render the component?

The error I'm currently getting is:

TS2339: Property 'component' does not exist on type 'JSX.IntrinsicElements'.

radovix · Accepted Answer · 2020-05-23 11:41:44Z

1

I think that React.createElement is what you need. In your case, you could use it like this


function setupPanel(element: HTMLOrSVGElement, component: Object)
{
    let params = {};

    return React.createElement(
       component,
       params
       /* maybe pass element here as child, not sure what that prop is */
    );
}

answered May 23, 2020 at 11:41

radovix

3,3042 gold badges14 silver badges28 bronze badges

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

1 Comment

Danack Over a year ago

thanks.....I almost had it but was confused by some typescript errors....that don't seem to be useful error messages.

Collectives™ on Stack Overflow

How to use variable to create react element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related