1
resposta

É possivel criar id dinamico ou deletar comparando pela key do componente?

É possivel criar id's dinamicos ou deletar comparando pela key do componente?

1 resposta

Oi Thiago, tudo bem?

Desculpe a demora em retornar.

Sim, é possível criar ids dinâmicos e também deletar componentes comparando pela key do componente.

Para criar ids dinâmicos, você pode utilizar uma variável ou uma função para gerar um id único para cada componente. Uma forma simples de fazer isso é utilizando o método map() para renderizar os componentes em uma lista e, dentro do loop, gerar um id único para cada componente. Por exemplo:

import React, { useState } from "react";

function ListaDeItens({ itens }) {
  const [idAtual, setIdAtual] = useState(0);

  return (
    <ul>
      {itens.map((item) => {
        const id = `item-${idAtual}`;
        setIdAtual(idAtual + 1);

        return (
          <li key={id}>
            {item}
          </li>
        );
      })}
    </ul>
  );
}

Nesse exemplo, a cada iteração do loop, o valor de idAtual é incrementado e um novo id único é gerado para o componente.

Para deletar um componente comparando pela key, você pode utilizar o método filter() para criar uma nova lista de componentes sem o componente que deseja remover. Por exemplo:

import React, { useState } from "react";

function ListaDeItens({ itens }) {
  const [itensLista, setItensLista] = useState(itens);

  function removerItem(id) {
    const novaLista = itensLista.filter((item) => item.key !== id);
    setItensLista(novaLista);
  }

  return (
    <ul>
      {itensLista.map((item) => (
        <li key={item.key}>
          {item.texto}
          <button onClick={() => removerItem(item.key)}>Remover</button>
        </li>
      ))}
    </ul>
  );
}

Nesse exemplo, a função removerItem() recebe o id do componente que deve ser removido e utiliza o método filter() para criar uma nova lista de componentes sem o componente com o id correspondente. Em seguida, a nova lista é armazenada no estado itensLista utilizando a função setItensLista().

Espero que tenha te ajudado.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software