Pasar una etiqueta HTML como prop en React

Claudia Valdivieso

Claudia Valdivieso / August 17, 2019

1 min read

Tweet

¿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

¿Te gustó este artículo? déjamelo saber en Twitter y compártelo con tus amigos 👇
Tweet
¿Encontraste algún error en este artículo? Edítalo en GitHub