React/JSX dynamic component names

Question

I am looking to render a component based upon a string. Essentially, I am hoping to find the JSX equivalent to JavaScript's dynamic function name ability (parent["childMethod"]).

So, if I have a string, such as "<MyComponent />", how can I turn into JSX and render?

Why do you need to use JSX if you are already putting it into a string? — David Hellsing
– David Hellsing, Commented Mar 4, 2015 at 0:02
Your title and your second paragraph present different problems. If you've specifically got a component name in a string, as implied by your title, you can (assuming your build pipeline doesn't minify or otherwise change component names) create an element from it with React.createElement, store that element in a variable, and include the element within some JSX using curly braces. If you have the entire JSX code for an element in a string, though, like "<MyComponent />, you need another solution that I don't know. — Mark Amery
– Mark Amery, Commented Jan 3, 2022 at 23:36
Does this answer your question? Dynamic tag name in React JSX — cobrexus
– cobrexus, Commented Jul 10, 2022 at 11:16

Scott · Accepted Answer · 2015-07-20 05:49:59Z

JSX is just a nice syntax for function calls, so you need to have the actual functions to use a component. If you have an object that contains React components then you can render a component based on a string property. For example if you have an object called MyComponents (has to be uppercase for JSX) and that object has React components like MyComponents.SomeInput = React.CreateClass(...). Then you can use <MyComponents.SomeInput /> in your JSX.

i'm having the same problem but var ContentBlocks = { info : require('./Infoblock'), portrait : require('./Portraitblock') }; and <ContentBlocks['info']> throws an error
I just checked and you're right, you can use <ContentBlocks.info> or alternatively do var MyComponent = MyComponents['info']; and <MyComponent> if the key isn't known when you're writing it.

Collectives™ on Stack Overflow

React/JSX dynamic component names

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related