Remove items form the list in React js

Question

I am creating a To-do app & I am not able to write the code for deleting the elements of the list when we click them. I want the specific item to delete when a user clicks on it

class Todo extends React.Component {

    constructor(props) {
      super(props);
      this.state={todos:[]};
    }

    save() {
      var todos = [...this.state.todos];
      todos.push(this.newText.value);
      this.setState({todos});
    }

    remove{

    }


    render(){
        return(
            <div className="list">
              <h1> TO-DO List</h1>
              <input type="text" ref={(ip) => {this.newText = ip}}/>
              <button onClick={this.save.bind(this)} className="btn btn-primary glyphicon glyphicon-floppy-saved">Save
              </button>
              <ul>
                {this.state.todos.map(function(todo) {
                      return <li>{todo}</li>

                 })}

              </ul>
            </div>
        )
    }
};

Shubham Khatri · Accepted Answer · 2017-05-10 14:38:03Z

3

You need to pass on the index of the todo and then remove that using the slice function in javascript like

remove(e, index){
      var todos = [...this.state.todos];
      todos.slice(index, 1);
      this.setState({todos})
}

class Todo extends React.Component {

    constructor(props) {
      super(props);
      this.state={todos:[]};
    }

    save() {
      var todos = [...this.state.todos];
      todos.push(this.newText.value);
      this.setState({todos});
    }

    deleteTodo(index){
        console.log(index)
         var todos = [...this.state.todos];
         todos.splice(index, 1)
         this.setState({todos})
    }


    render(){
        return(
            <div className="list">
              <h1> TO-DO List</h1>
              <input type="text" ref={(ip) => {this.newText = ip}}/>
              <button onClick={this.save.bind(this)} className="btn btn-primary glyphicon glyphicon-floppy-saved">Save
              </button>
              <ul>
                {this.state.todos.map(function(todo, index) {
                      return <li key={index} onClick={this.deleteTodo.bind(this, index)}>{todo}</li>

                 }.bind(this))}

              </ul>
            </div>
        )
    }
};

ReactDOM.render(<Todo/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

edited May 10, 2017 at 14:38

answered May 10, 2017 at 13:23

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

1 Comment

user1882644 Over a year ago

There is a typo in remove function: Instead slice you means splice. Please, fix that.

Mayank Shukla · Accepted Answer · 2017-05-10 13:34:21Z

Define a onClick method with each todo elements, and bind the name also, like this:

{this.state.todos.map((todo) => { //use arrow function to bind the context
       return <li onClick={this._deleteTodo.bind(this, todo)}>{todo}</li>
})}

Whenever you click on any todo items it will pass the name of that to onClick function, now use indexOf to calculate the index of that item in array, and use splice to delete that from the list, like ethis:

_deleteTodo(value){
    let todos = this.state.todos.slice();  //create a copy of that array first
    todos.splice(todos.indexOf(value), 1);
    this.setState({todos});  
}

Check the working example:

class Todo extends React.Component {

    constructor(props) {
      super(props);
      this.state={todos:[]};
    }

    save() {
      var todos = [...this.state.todos];
      todos.push(this.newText.value);
      this.setState({todos});
    }

    _deleteTodo(value){
       let todos = this.state.todos.slice();  
       todos.splice(todos.indexOf(value), 1);
       this.setState({todos});  
    }


    render(){
        return(
            <div className="list">
              <h1> TO-DO List</h1>
              <input type="text" ref={(ip) => {this.newText = ip}}/>
              <button onClick={this.save.bind(this)} className="btn btn-primary glyphicon glyphicon-floppy-saved">Save
              </button>
              <ul>
                {this.state.todos.map((todo) => {
                    return <li onClick={this._deleteTodo.bind(this, todo)}>{todo}</li>
                })}
              </ul>
            </div>
        )
    }
};

ReactDOM.render(<Todo/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Collectives™ on Stack Overflow

Remove items form the list in React js

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related