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}
))}
);
};
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!
