How do I create a component by reference?

Question

Suppose I have:

import MyComponent from "../somewhere"

I can create an instance of it by doing:

<MyComponent myprops={myprops} />

But can I create one programmatically from MyComponent and add props?

For example, I have a list of component references:

import comp1 from "somewhere"
import comp2 from "somewhere"
import comp3 from "somewhere"

var myComponents = [
    comp1, comp2, comp3
];

And now I have to take one of them and put in the view:

var randomComponent = myComponents[Math.random() * 3 | 0];

// render
render(){
    return randomComponent; // this doesn't work and certain props have to be added
}

Is there a way to avoid doing the following and achieve the same?

var myComponents = [
    <comp1 props=... />, <comp2 props=... />, <comp3 props=... />
];

Can't you just do (make sure `RandomComponent` is capitalized): `` — Andrew Li, Feb 17 '17 at 02:07
@AndrewLi Does that actually work? I have never tried that approach. — Derek 朕會功夫, Feb 17 '17 at 02:11
@Derek朕會功夫 Should work alright, just make sure the component name is *capitalized* so it isn't treated as a DOM element, but I would check to make sure first. — Andrew Li, Feb 17 '17 at 02:12
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/135911/discussion-between-andrew-li-and-derek-). — Andrew Li, Feb 17 '17 at 02:19

Andrew Li · Accepted Answer · 2017-02-17T02:31:05.600

You can do the following:

var RandomComponent = myComponents[Math.random() * 3 | 0];

render() {
    return <RandomComponent props={foobar} />;
}

The above is demonstrated at the React Docs where the following is mentioned:

You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. (emphasis mine)

The reason why the component's name must be capitalized is because it will be treated as a built-in component (DOM component) if not. This works because it's just transpiled into this:

React.createElement(RandomComponent, { props: foobar });

And RandomComponent still refers to a random selected component. If randomComponent is not capitalized, you can just do it without JSX like so:

React.createElement(randomComponent, { props: foobar });

You just won't be able to do it with JSX because randomComponent is lowercase and will incidentally be transpiled into this:

React.createElement("randomComponent", { props: foobar });

Which is problematic as "randomComponent" does not refer to randomComponent.

score 2 · Answer 2 · answered Feb 17 '17 at 02:12

2

see Create react component dynamically

var component = myComponents[Math.random()*3 |0];
return React.createElement(component, props);

answered Feb 17 '17 at 02:12

FuzzyTree

32,014
3
54
85

Lauren · Answer 3 · 2020-03-03T19:29:47.500

Thought I would share. I had a very specific use case for this using imported svg files, but I believe this would work with components as well. I wanted to have a button component that would load different svg icons given a prop type.

import LightBulb from '../my-icons/Lightbulb.svg';

const ICON_TYPES = {
  LightBulb: 'LightBulb',
};

const ICON_TYPE_FILES = {
  [ICON_TYPES.LightBulb]: LightBulb,
};

export default function IconButton({iconType}) {
  const IconComponent = ICON_TYPE_FILES[iconType];
  return (
    <Icon>
      <IconComponent />
    </Icon>
   );
};
IconButton.ICON_TYPES = ICON_TYPES

Using component:

<IconButton
  iconType={IconButton.ICON_TYPES.LightBulb}
/>

How do I create a component by reference?

3 Answers3