Mestres BEGIN – Front-End – 16 – Implementando funcionalidade de deleção – React JS

No tutorial de hoje, vamos aprender como implementar a funcionalidade de deleção em uma aplicação web usando React JS. Esta feature é muito comum em aplicações do mundo real, onde os usuários precisam ter a capacidade de excluir itens de uma lista ou conjunto de dados.

Passo 1: Configuração do ambiente

Primeiro, certifique-se de ter o React JS instalado em seu ambiente de desenvolvimento. Você pode fazer isso executando o seguinte comando:


npx create-react-app my-app
cd my-app
npm start


Isso criará um novo aplicativo React e o iniciará no seu navegador padrão.

Passo 2: Criando o componente de lista

Agora, vamos criar um componente de lista simples que exibirá os itens a serem excluídos. Você pode fazer isso criando um novo arquivo chamado List.js e adicionando o seguinte código:


import React from 'react';

const List = ({ items, deleteItem }) => {
return (

{items.map((item, index) => (
• {item}
  deleteItem(index)}>Excluir

))}

);
};

export default List;


Passo 3: Implementando a funcionalidade de deleção

Agora que temos o componente de lista, podemos implementar a lógica para a funcionalidade de deleção. Para fazer isso, vamos voltar para o nosso componente principal App.js e adicionar o seguinte código:


import React, { useState } from 'react';
import List from './List';

function App() {
const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

const deleteItem = (index) => {
const newItems = items.filter((item, i) => i !== index);
setItems(newItems);
};

return (

Lista de Itens

);
}

export default App;


Agora, quando você executa o aplicativo, verá uma lista de itens com um botão “Excluir” ao lado de cada um deles. Ao clicar nesse botão, o item correspondente será removido da lista.

Esta é uma maneira simples de implementar a funcionalidade de deleção em uma aplicação web usando React JS. Espero que este tutorial tenha sido útil e que você possa aplicar esse conceito em seus próprios projetos. Divirta-se codificando!