import dynamic components in reactjs

Question

fairly new to react.js, but prototyping a concept and getting stuck.

I want to have a component that delivers a variable name back (that it gets from an API), then based on that name, import a bunch of files that would share the same name in a folder structure, i.e.;

Folder structure

src/components/test/comp1.js
src/components/test/comp2.js

Then in my App component

import GetName from './components/apiRequest.GetName';
import Comp1 from './components/<GetName />/comp1';

Were GetName would deliver 'test' - But i can't do this, i just get a 'failed to compile' - any ideas on where i'm going wrong?

Even if it is possible, I don't think it's a good way to do, if you don't mind I can try to show you other ways. — Bruno Mazzardo
– Bruno Mazzardo, Commented May 29, 2018 at 17:31
Sure thing, suggest away. I basically want to load a set of HTML elements depending on the specific variable name I'm delivered back from our api. These would be physical HTML pages/ react components in separate folder structure, named the same as the variable I get back from api — grhmstwrt
– grhmstwrt, Commented May 29, 2018 at 17:35
take a look at this answer, i think you can make it work with a factory like this one stackoverflow.com/questions/29923879/… — Bruno Mazzardo
– Bruno Mazzardo, Commented May 29, 2018 at 17:36

Karim · Accepted Answer · 2018-05-29 17:41:16Z

1

The way you suggested won't work because GetName will return a React Component not a plain string that you can interpolate.

Assuming that you have a function GetName that returns a plain string rather than a component you can use the require api for a dynamic import.

//external module
function GetName(){
 //here you put your logic to return the name
 return "MyComponent";

}

and

class App extends Component {
  //App component
  render(){
    const myComp = require(`./components/${GetName()}`).default;
  }

}

answered May 29, 2018 at 17:41

Karim

8,6823 gold badges27 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

import dynamic components in reactjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related