Remove item from array in React

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;

Fetch array from state and remove element using [splice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) function and set state. — sarthak, Jan 03 '18 at 12:12
Possible duplicate [delete-item-from-state-array-in-react](https://stackoverflow.com/questions/36326612/delete-item-from-state-array-in-react). — margaretkru, Jan 03 '18 at 12:13

denismart · Answer 1 · 2019-04-08T09:29:30.103

6

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

edited Apr 08 '19 at 09:29

answered Oct 08 '18 at 17:49

denismart

408
3
12

2

I think you meant to use `splice` here. But even still `splice` mutates the array directly, which is generally frowned upon in React. – BMiner Feb 28 '19 at 03:18
Yep it is splice not slice! 2 different functions. – JeremyF Apr 05 '19 at 00:39

Hải Anh Nguyễn · Answer 2 · 2020-09-24T07:42:45.520

4

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

edited Sep 24 '20 at 07:42

answered Aug 17 '20 at 09:12

Hải Anh Nguyễn

63
6

2

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please [include an explanation for your code](https://meta.stackexchange.com/q/114762/269535), as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. You can use the [edit] button to improve this answer to get more votes and reputation! – Brian Tompsett - 汤莱恩 Aug 17 '20 at 10:37
i'm sorry that my fault! – Hải Anh Nguyễn Sep 24 '20 at 07:43

score 3 · Answer 3 · edited Feb 11 '19 at 11:57

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!

edited Feb 11 '19 at 11:57

Manzurul Hoque Rumi

2,328
4
14
38

answered Feb 11 '19 at 09:03

Chag

31
3

score 2 · Answer 4 · answered Jan 03 '18 at 12:16

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

Krasimir · Answer 5 · 2018-01-03T15:54:26.563

2

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

edited Jan 03 '18 at 15:54

answered Jan 03 '18 at 12:20

Krasimir

12,605
3
34
52

This one remove always 1st item in my Todo List, so if i press to remove last item, it remove 1st. Not working – Dave Wicomo Jan 03 '18 at 15:48
I'm sorry but It actually works, missed part from render(), Thanks – Dave Wicomo Jan 03 '18 at 15:54

Rick · Answer 6 · 2018-07-14T18:27:39.263

1

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

edited Jul 14 '18 at 18:27

answered Jan 03 '18 at 12:16

Rick

837
6
14

maybe like this list.splice(index, 1); – Kvlknctk Jul 14 '18 at 17:53

score 0 · Answer 7 · answered Jan 03 '18 at 12:21

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;

This one delete few list items no metter which one you press to delete, so its dont work — Dave Wicomo, Jan 03 '18 at 15:47
just check once more its actually working as i am passing index of particular array item @DaveWicomo thanks — yogesh agrawal, Jan 03 '18 at 16:31

score 0 · Answer 8 · answered May 16 '19 at 07:12

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

Remove item from array in React

8 Answers8

Linked