Languages
[Edit]
EN

React - how to create dynamic tag name

0 points
Created by:
christa
270

In this article, we would like to show you how to create a dynamic tag name in React.

Quick solution:

const Tag = 'div';  // <----------- tag name from varaible

const element = (
    <Tag>Some content inside ...</Tag>
);

 

Practical example

Below we create a component that receives heading importance as priority via props and returns<h1>, <h2> or <h3> tag depending on received props.

Runnable example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines while working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const MyComponent = (props) => {
  const DynamicTag = `h${props.priority}`;  // <----------- dynamic tag name
  return <DynamicTag>priority = {props.priority}</DynamicTag>;
};

const App = () => {
  return (
    <div>
      <MyComponent priority="1" />
      <MyComponent priority="2" />
      <MyComponent priority="3" />
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Note:

If you are using TypeScript replece line with const DynamicTag = ... with:

const DynamicTag = `h${this.props.priority}` as keyof JSX.IntrinsicElements;
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join