node.js - Dynamic tag name in jsx and React -

i try write react component. html heading tags(h1,h2,h3,etc...), heading priority dynamically changing based on priority have defined in props.

here try do.

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

expected output:

<h1>hello</h1>

this not working. there possible method this?

no way in-place, put in variable (with first letter capitalised):

const customtag = `h${this.props.priority}`;  <customtag>hello</customtag >