CODEWITHSUNDEEP
reactjsjsx
Danack
Danack

Reputation: 25701

How to use variable to create react element

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'.

Upvotes: 1

Views: 1693

Answers (1)

radovix
radovix

Reputation: 3177

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

Upvotes: 1

Related Questions