Remove item from array in React - reactjs

Question

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 on console.logs watch what happened so I deleted it
import 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;

Answer 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

Answer 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);

Answer 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!

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

Answer 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>
)
}

Answer 6

I would pass the index of the item in the list on click then splice the array:
<ul>
{
this.state.list.map((x,y) => {
return (
<li key={y}>
{x}
<button onClick={() => this.removeItem(y)}>-</button>
</li>
);
})
}
</ul>
Then in removeItem:
removeItem(index) {
const list = this.state.list;
list.splice(index, 1);
this.setState({ list });
}

Answer 7

import 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);
}
textChange(e) {
this.setState({
text: e.target.value
})
}
addToList() {
this.setState(prevState => ({
list: prevState.list.concat(this.state.text),
text: ''
}))
}
removeItem(index) {
let newList = this.state.list.splice(index,1);
this.setState({list:newList})
}
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.bind(this,y)}>-</button>
</li>})}
</ul>
</div>
)
}
}
export default Todo;

Answer 8

_deleteTodo(index) {
console.log("delete " + index);
this.state.todos.splice(index, 1);
this.setState({
todos: this.state.todos.filter(i => i !== index)
});
}
I had a problem with splice and i honestly don know why. However this method work for me and you can try it! Ps. If anybody know why splice is not working with state and index please let me know i am curious!