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.

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!