Dynamic tag name in jsx and React

Question

I am trying to write a React component. for html headers (h1, h2, h3, etc.), where the priority of the header dynamically changes depending on the priority that we have defined in the details.

Here is what I am trying to do.

<h{this.props.priority}>Hello</h{this.props.priority}>

expected output:

<h1>Hello</h1>

This does not work. Is there any possible way to do this?

Answer 1

There is no way to do this in place, just put it in a variable ( with a capital first letter ):

 const CustomTag = 'h${this.props.priority}'; <CustomTag>Hello</CustomTag> 

Answer 2

For completeness, if you want to use a dynamic name, you can also directly call React.createElement instead of using JSX:

 React.createElement('h${this.props.priority}', null, 'Hello') 

This eliminates the need to create a new variable or component.

With the requisite:

 React.createElement( 'h${this.props.priority}', { foo: 'bar', }, 'Hello' ) 

---

From the docs :

Create and return a new React element of this type. A type argument can be either a tag name string (for example, 'div' or 'span' ) or a React component type (class or function).

Code written using JSX will be converted to use React.createElement() . Usually you will not call React.createElement() directly if you use JSX. See React Without JSX for more.

Answer 3

In the case of dynamic headers (h1, h2 ...), the component can return React.createElement (mentioned above by Felix ), as it happens.

 const Heading = ({level, children, ...props}) => { return React.createElement('h${level}', props , children) } 

For the arrangement, both details and children are skipped.

See an example