Pasar una etiqueta HTML como prop en React

¿Puedo pasar una etiqueta HTML como propiedad en React?

La respuesta es sí, y es muy fácil:

import React from 'react';
import ReactDOM from 'react-dom';
 
const App = (props) => {
  const { tag: Tag } = props; // 👀 he aquí el truco
  return (
    <div className="App">
      <Tag>Hello 👋</Tag>
    </div>
  );
};
 
const rootElement = document.getElementById('root');
ReactDOM.render(<App tag="h1" />, rootElement);

Ahora Tag puede ser cualquier nombre que tu quieras darle. Por ejemplo, puedes cambiarlo por Element y tendríamos el mismo resultado:

import React from 'react';
import ReactDOM from 'react-dom';
 
const App = (props) => {
  const { tag: Element } = props; // 👀
  return (
    <div className="App">
      <Element>Hello 👋</Element>
    </div>
  );
};
 
const rootElement = document.getElementById('root');
ReactDOM.render(<App tag="h1" />, rootElement);

Y eso es todo ✌😁

Fuente: Stack Overflow