Select React element type using general expressions

May 6, 2020 · React

The usual way of using a React element is to first import it and then utilize it inside of an another React component like so.

import React from 'react';
import { PhotoStory } from './stories';

function Story(props) {
  return <PhotoStory story={props.story} />;
}

So, in this case, we’ve imported PhotoStory type and used it in Story component as shown above.

Now, there might be a situation where you would want to decide the element type based on some condition. Let’s say it would be based on props. So for instance, take this.

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  return <components[props.storyType] story={props.story} />; // ❌
}

In the above example, we would like React to choose the element type based on the components that we’ve specified. But, you couldn’t use computed property/general expression to indicate the type of the element.

Instead, to make it work, you’d need to first assign it to a capitalized variable and use that variable as the element type. So, the above example would get changed to the following.

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />; // ✔️
}

And that’s how you can use the general expressions as React element type!

Previous: Null coalescing assignment operator in PHP Next: How to pull a composer package in a Laravel project locally

» Share: Twitter, Facebook, Hacker News

Like this article? Consider leaving a

Tip

👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

Become a Sponsor