Dynamic tag name in React JSX

I am trying to write a React component for HTML heading tags(h1, h2, h3, etc.), where the heading level is specified via a prop.

I tried to do this like this:

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

and expected output like:

<h1>Hello</h1>

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

8 Answers
8

Leave a Comment