call react component-element as variable

Question

Is it possible to call a React component element with a variable inside?

    import React from "react"

    /*React functional component*/

    function someName() {

      const someVar = "componentName"; //the name of the called component

      return(
        <{someVar}/>
      )
    }

    export default someName;

I try to implement this in a router and to change the filenames(Sites) (in the element) dynamically with useState from fetched data.

I am open to all kind of help :)

Thunderbolt Engineer · Accepted Answer · 2021-01-23 11:34:28Z

2

There is no direct way to do that but you can use this approach.

import ComponentA from '...path';
import ComponentB from '...path';
...

const components = {
  componentA: ComponentA,
  componentB: ComponentB,
  ...
}

...
function App(props) {
    const TargetComponent = components[props.componentName];
    return <TargetComponent />;
}

answered Jan 23, 2021 at 11:34

Thunderbolt Engineer

1,5639 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

call react component-element as variable

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