CODEWITHSUNDEEP
reactjs
Dave Wicomo
Dave Wicomo

Reputation: 163

Remove item from array in React

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;

Upvotes: 4

Views: 112299

Answers (8)

Hải Anh Nguyễn
Hải Anh Nguyễn

Reputation: 163

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

Upvotes: 14

Gerald H
Gerald H

Reputation: 618

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

Upvotes: 0

denismart
denismart

Reputation: 582

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

Upvotes: 8

Chag
Chag

Reputation: 31

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!

Upvotes: 3

Rick
Rick

Reputation: 997

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

Upvotes: 1

Krasimir
Krasimir

Reputation: 13529

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

Upvotes: 2

yogesh agrawal
yogesh agrawal

Reputation: 726

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;

Upvotes: 0

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15831

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

Upvotes: 2

Related Questions