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>
  )
}
Share:
90,740
Dave Wicomo
Author by

Dave Wicomo

Updated on September 24, 2020

Comments

  • Dave Wicomo
    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 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;