get components by string names in ReactJS

Question

I have a component that has some other components imported in for example:

import ComponentA from './components/ComponentA.js';
import ComponentB from './components/ComponentB.js';
import ComponentC from './components/ComponentC.js';
class Main extends Component {
...

then I have a function inside the main component named returnChild(String childName) that gets a string input, for example ComponentA or ComponentB, and returns the Component Object.

now I'm using a switch case to do it but components are too many and my source is messy. is there any way to get the value by string name in reactJS? For example:

returnChild = (childName) => {
    return get_value_by_name(childName)
}

Can you elaborate on why you need the string? Add in ur Main code. — Roy Wang
– Roy Wang, Commented Apr 23, 2018 at 7:14

Ajay Gaur · Accepted Answer · 2018-04-23 07:37:06Z

1

You can make a config of components and then return the component based on config. e.g.,

import ComponentA from './components/ComponentA.js';
import ComponentB from './components/ComponentB.js';
import ComponentC from './components/ComponentC.js';
....

const STRING_TO_COMPONENTS = {
    'componentA': componentA,  //the key is a string and value is a component object
    'componentB': componentB,  
    'componentC': componentC,  
    ....
}

and while using, you can use it something like this

returnChild = childName => STRING_TO_COMPONENTS[childName];

That would be the neatest method I know.

answered Apr 23, 2018 at 7:37

Ajay Gaur

5,2807 gold badges41 silver badges64 bronze badges

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

4 Comments

reza Over a year ago

no. I dont want to duplicate the names. I want to make it dynamic

Ajay Gaur Over a year ago

That is dynamic and you're not creating duplicate names. You're just making an object which "dynamically" will give you the component. Also, please comment the solution if you find anything better.

reza Over a year ago

I didn't found any good solution. for "dynamically" I meant when a new component is added to components directory. I don't have to its name serveral times

Ajay Gaur Over a year ago

Because there isn't any better solution. If there were, someone would've answered your question :)

Collectives™ on Stack Overflow

get components by string names in ReactJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related