Remove item from array in React
90,740
Solution 1
in my solution eg:
const remove = (i) => {
const arr = data.filter((item) => item.name !== i);
setData(arr);
};
I filtered the items that are not removed and set again the state
Solution 2
Removing item from array by index:
const newList = this.state.list.splice(index, 1);
Removing item from array by value:
const newList = this.state.list.splice(this.state.list.indexOf(value), 1);
Solution 3
You can filter your list by the issue you want, and it will be auto removed, for example, if you want to remove all items = 3 :
list: prevState.list.filter(x=> x != 3);
Good luck!
Solution 4
removeItem(item) {
const item = getItem(this.state.list, item.id) // Method to get item in list through comparison (IE: find some item with item.id), it has to return ITEM and INDEX in array
const newlist = [].concat(list) // Clone array with concat or slice(0)
newlist.splice(item.index, 1);
this.setState({list: newlist});
}
Solution 5
I think you should pass the index of the item to your removeItem
function. Like so:
removeItem(index) {
const list = this.state.list;
list.splice(index, 1);
this.setState({ list });
}
render() {
return(
<div>
<h1>My Todo List</h1>
<h3>Add item</h3>
<input value={this.state.text} onChange={e => this.textChange(e)}/>
<button onClick={this.addToList}>+</button>
<ul>{
this.state.list.map((text, i) => {
return (
<li key={i}>
{text}
<button onClick={() => this.removeItem(i) }>-</button>
</li>
);
})}
</ul>
</div>
)
}
Author by
Dave Wicomo
Updated on September 24, 2020Comments
-
Dave Wicomo over 3 years
I have problem with removeItem function (it should remove current
<li>
that button is nested in, and item from array on this.state.list), no code currently because I try so much things of that and nothing working so I end up onconsole.logs
watch what happened so I deleted itimport React, { Component } from 'react'; import './Todo.css'; class Todo extends Component { constructor(props) { super(props); this.state = { list: [], text: '' } this.textChange = this.textChange.bind(this); this.addToList = this.addToList.bind(this); this.removeItem = this.removeItem.bind(this); } textChange(e) { this.setState({ text: e.target.value }) } addToList() { this.setState(prevState => ({ list: prevState.list.concat(this.state.text), text: '' })) } removeItem(e) { ? ? ? ? ? ? ? ? } render() { return( <div> <h1>My Todo List</h1> <h3>Add item</h3> <input value={this.state.text} onChange={e => this.textChange(e)}/> <button onClick={this.addToList}>+</button> <ul>{this.state.list.map((x,y) => { return <li key={y}>{x} <button onClick={this.removeItem}>-</button> </li>})} </ul> </div> ) } } export default Todo;