reactjs - Dynamic tag name in jsx and React

Question

I try to write a React component. for html heading tags(h1,h2,h3,etc...), where the heading priority dynamically changing based on the priority we have defined in the props.

Here what I try to do.

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

expected output:

<h1>Hello</h1>

This is not working. Is there any possible method to do this?

Answer 1

No way to do that in-place, just put it in a variable (with first letter capitalised):

const CustomTag = `h${this.props.priority}`;

<CustomTag>Hello</CustomTag>