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 function and set state. — sarthak
– sarthak, Commented Jan 3, 2018 at 12:12

Hải Anh Nguyễn · Accepted Answer · 2020-09-24 07:42:45Z

14

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, 2020 at 7:42

answered Aug 17, 2020 at 9:12

Hải Anh Nguyễn

1631 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brian Tompsett - 汤莱恩 Over a year ago

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

Hải Anh Nguyễn Over a year ago

i'm sorry that my fault!

denismart · Accepted Answer · 2019-04-08 09:29:30Z

8

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 8, 2019 at 9:29

answered Oct 8, 2018 at 17:49

denismart

5927 silver badges21 bronze badges

2 Comments

BMiner Over a year ago

I think you meant to use splice here. But even still splice mutates the array directly, which is generally frowned upon in React.

JeremyF Over a year ago

Yep it is splice not slice! 2 different functions.

Manzurul Hoque Rumi · Accepted Answer · 2019-02-11 11:57:14Z

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, 2019 at 11:57

Manzurul Hoque Rumi

3,1144 gold badges25 silver badges47 bronze badges

answered Feb 11, 2019 at 9:03

Chag

395 bronze badges

Comments

Mosè Raguzzini · Accepted Answer · 2018-01-03 12:16:03Z

2

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

answered Jan 3, 2018 at 12:16

Mosè Raguzzini

15.9k1 gold badge34 silver badges46 bronze badges

Comments

Krasimir · Accepted Answer · 2018-01-03 15:54:26Z

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 3, 2018 at 15:54

answered Jan 3, 2018 at 12:20

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

2 Comments

Dave Wicomo Over a year ago

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 Over a year ago

I'm sorry but It actually works, missed part from render(), Thanks

Rick · Accepted Answer · 2018-07-14 18:27:39Z

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, 2018 at 18:27

answered Jan 3, 2018 at 12:16

Rick

9976 silver badges14 bronze badges

1 Comment

Kvlknctk Over a year ago

maybe like this list.splice(index, 1);

yogesh agrawal · Accepted Answer · 2018-01-03 12:21:04Z

0

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;

answered Jan 3, 2018 at 12:21

yogesh agrawal

7267 silver badges15 bronze badges

2 Comments

Dave Wicomo Over a year ago

This one delete few list items no metter which one you press to delete, so its dont work

yogesh agrawal Over a year ago

just check once more its actually working as i am passing index of particular array item @DaveWicomo thanks

Gerald H · Accepted Answer · 2019-05-16 07:12:15Z

0

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

answered May 16, 2019 at 7:12

Gerald H

6187 silver badges18 bronze badges

Collectives™ on Stack Overflow

Remove item from array in React

8 Answers 8

2 Comments

2 Comments

Comments

Comments

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

2 Comments

Comments

Comments

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related