EN
React - how to add / remove items from array in state (class component)
0 points
In this article, we would like to show you how to add and remove items from an array in the state in React.
Below example presents two functions:
handleAddItemthat uses spread operator (...) to create a copy of array in the state, adds an item to it and then withsetState()method updates the state value.handleRemoveItemthat usesfilter()method to remove item with the last index from the array.
Runnable example:
xxxxxxxxxx1
// Note: Uncomment import lines during working with JSX Compiler.2
// import React from 'react';3
4
class App extends React.Component {5
constructor(props) {6
super(props);7
this.state = {8
items: []9
};10
}11
12
handleAddItem = () => {13
const items = this.state.items;14
this.setState({ items: [items, 'item-' + items.length] });15
};16
17
handleRemoveItem = () => {18
const items = this.state.items;19
if (items.length > 0) {20
const lastIndex = items.length - 1;21
this.setState({ items: items.filter((item, index) => index !== lastIndex) });22
}23
};24
25
render() {26
const items = this.state.items;27
return (28
<div className="wrapper">29
<div>30
List: {items.length} total items.31
</div>32
<button onClick={this.handleAddItem}> Add</button>33
<button onClick={this.handleRemoveItem}>Remove</button>34
<ul>35
{items.map((item, index) => <li key={index}>{item}</li>)}36
</ul>37
</div>38
)39
}40
}41
42
const root = document.querySelector('#root');43
ReactDOM.render(<App />, root );Note:
Go to this article to see functional component example.
