Como criar uma tag dinâmica em React

Neste artigo você vai aprender a criar uma tag dinâmica em React, dentro do JSX do seu componente

Fala programador(a), beleza? Bora aprender mais sobre React!

Criar uma tag dinâmica no React é uma tarefa simples e pode ser feita utilizando componentes funcionais.

Um componente funcional é uma função que retorna um elemento React, o que significa que ele pode ser reutilizado em vários lugares da sua aplicação sem se preocupar com o estado ou outros conceitos avançados do React.

A primeira coisa a fazer é definir o componente funcional, que receberá uma propriedade chamada “tag”. Esta propriedade será usada para decidir qual tag HTML será renderizada pelo componente.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 15min

Conhecer formação

Aqui está o código:

import React from 'react';

const DynamicTag = ({ tag, children }) => {
  const Tag = tag;
  return <Tag>{children}</Tag>;
};

export default DynamicTag;

Neste exemplo, estamos importando o React e definindo um componente funcional chamado “DynamicTag”. Ele recebe duas propriedades: “tag” e “children”.

A propriedade “tag” será usada para decidir qual tag HTML será renderizada, enquanto a propriedade “children” representa o conteúdo que estará dentro da tag.

Na implementação do componente, criamos uma constante chamada “Tag” e atribuímos a ela o valor da propriedade “tag”.

Em seguida, usamos a sintaxe de JSX para renderizar a tag HTML, usando a constante “Tag” como nome da tag e passando a propriedade “children” para ela.

Para usar o componente “DynamicTag” em outro lugar da sua aplicação, basta passar a tag HTML desejada como propriedade “tag”, como no exemplo abaixo:

import React from 'react';
import DynamicTag from './DynamicTag';

const App = () => {
  return (
    <DynamicTag tag="h1">Título dinâmico</DynamicTag>
  );
};

export default App;

Neste exemplo, estamos importando o componente “DynamicTag” e usando-o dentro do componente “App”.

Passamos “h1” como propriedade “tag” para que o componente renderize uma tag “h1” com o conteúdo “Título dinâmico”.

Em resumo, criar uma tag dinâmica no React é uma tarefa simples que pode ser feita utilizando componentes funcionais.

Basta passar a tag HTML desejada como propriedade para o componente e usar a sintaxe de JSX para renderizá-la.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Em conclusão, usar componentes funcionais para criar tags dinâmicas no React é uma forma eficiente e fácil de melhorar a reutilização de código na sua aplicação.

Ao passar a tag desejada como propriedade para o componente, é possível renderizar diferentes tipos de tags HTML de forma dinâmica, sem precisar escrever vários componentes diferentes para cada tipo de tag.

Além disso, componentes funcionais são leves e fáceis de entender, o que significa que eles são uma ótima escolha para tarefas simples como essa.

Por fim, é importante destacar que essa é apenas uma das várias formas de criar tags dinâmicas no React, e outras abordagens, como componentes de classe, também podem ser usadas.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!