Удаление элементов из списка предполагает исключение определенных элементов из упорядоченного набора данных. В Python существует несколько методов удаления элементов из списка, каждый из которых имеет свои особенности и применение.
В этом уроке мы научимся удалять элементы из списка в React. Мы будем использовать хук useState и функциональные компоненты. Чтобы удалить элементы из списка в React, выполните следующие действия.
1. Создайте новый проект React:
npx create-react-app list-items example
<а я=0>2. Полный исходный код в src/App.js:
// src/App.js
import { useState } from 'react';
import './App.css';
function App() {
// Declare the state variable, which we'll call "items"
const [items, setItems] = useState([
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 5, name: 'Item 4 - Home' },
{ id: 4, name: 'Item 4' },
]);
// Delete the item with the given id
// This function will be called when an "X" button is clicked
const removeItem = (id) => {
const updatedList = items.filter((item) => item.id !== id);
setItems(updatedList);
};
return (
<div className='container'>
<h2>Demo App</h2>
<p>You can delete an item by using the "X" button associated with it</p>
{/* Implement the list */}
<div className='list'>
{items.map((item) => (
<div className='item' key={item.id}>
<span className='item-name'>{item.name}</span>
<button
className='delete-button'
onClick={() => removeItem(item.id)}
>
X
</button>
</div>
))}
</div>
</div>
);
}
export default App;
<а я=0>3. Код CSS для src/App.js:
/* src/App.css */
.container {
width: 80%;
margin: 40px auto;
}
.list {
margin-top: 30px;
}
.item {
margin: 5px 0px;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
background: #eee;
border: 1px solid #ccc;
border-radius: 5px;
}
.item:hover {
background: #ddd;
}
.item-name {
font-size: 16px;
}
.delete-button {
padding: 6px 10px;
background: red;
color: #fff;
font-weight: bold;
font-size: 19px;
border: none;
cursor: pointer;
}
.delete-button:hover {
background: #c00;
}
4. Запустите приложение:
npm start
Теперь запустите приложение и проверьте результаты.