Delete list item ReactJS

Question

I have managed to create a list using ReactJS where you type something in and it adds it to the list underneath the text box. However, I now want the user to be able to delete something from that list.

Here is some code:

var ToDoList = React.createClass({

  deleteItem: function(item){
    var items = this.state.items.filter(function(itm) {
      return item.id !== itm.id;
    })
  },

  render: function() {
    var DeleteClick=this.deleteItem;        
    var listItems = this.props.listItems.map(function(submittedValue) {
      return (
          <ToDoListItem key={submittedValue.id}>{submittedValue.text}<button onClick={DeleteClick}> X </button></ToDoListItem>

      )
    });
    return (
        <ul className="toDoList">
          {listItems}

        </ul>
    );
  }
});

This code generates this error message: Uncaught TypeError: Cannot read property 'deleteItem' of undefined

Here is some more code as to how I am generating the adding to the list:

var i = 1;
var ToDoForm = React.createClass({

  getInitialState: function() {
    return {text: '', submittedValues: [{id: '000001', text: 'Rich'}, {id: '000002', text: 'Simon'}]};
  },
  handleChange: function(event) {
    this.setState({text: event.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();

    var submittedValue = {text: this.state.text, id: i++};
    this.setState({submittedValues: this.state.submittedValues.concat(submittedValue)});
    this.setState({text: ''});
    console.log("ToDo: " + this.state.submittedValues);
  },

  render: function() {

    return (
        <div>
          <h1> todos </h1>

          <form className="todoForm" onSubmit={this.handleSubmit}>
            <input
                type="text"
                placeholder="Type out a task"
                value={this.state.text}
                onChange={this.handleChange}
                />
            <input
                type="submit"
                value="Submit todo"
                />
          </form>

          <h2> Data should appear here </h2>

          <ToDoList listItems={this.state.submittedValues}/>
        </div>
    );
  }
});

Not sure how to get the delete to work

Oleksandr T. · Accepted Answer · 2015-11-25 14:08:42Z

1

You need set this to .map because this refers to global scope not to ToDoList object,

var listItems = this.props.listItems.map(function(submittedValue) {
   // your code
}, this);

answered Nov 25, 2015 at 14:08

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

7 Comments

The Hurricane Over a year ago

what needs to go inside the deleteItem function though?

Oleksandr T. Over a year ago

@The Hurricane could you clarify what do you mean

The Hurricane Over a year ago

sure. I have edited the code above to reflect what my code looks like including your changes. currently when I click on my button nothing happens when what I want is for it to delete that particular item. something must be wrong in my deleteItem function but I cannot work it out. can you see any errors?

Oleksandr T. Over a year ago

@The Hurricane I've created example based on your code - jsfiddle.net/69z2wepo/22297.

The Hurricane Over a year ago

couple of questions. 1) line 31 why no closing tag for ToDoListItem? 2) line 18 what does el stand for? 3) mine is looking like this: Rich onDelete=

|

Vikas Yadav · Accepted Answer · 2017-09-10 09:47:15Z

1

you have to try the below mentioned code as:

var DeleteClick=this.deleteItem;
var listItems = this.props.listItems.map(function(submittedValue) {
  return (
      <ToDoListItem key={submittedValue.id}>{submittedValue.text}<button onClick={DeleteClick}> X </button></ToDoListItem>

  )
});

you have used this keyword in map function and scope of this is limited to map function only that's y it's causing the prob

edited Sep 10, 2017 at 9:47

Vikas Yadav

3,3782 gold badges23 silver badges22 bronze badges

answered Nov 25, 2015 at 14:07

Dhaval Patel

7,6116 gold badges43 silver badges72 bronze badges

5 Comments

The Hurricane Over a year ago

cannot read properties items of null is the error presumably because the items variable has nothing in it

Dhaval Patel Over a year ago

@TheHurricane: yes because you haven't set state in your ToDoList Component

The Hurricane Over a year ago

what should be in that delete function then?

Dhaval Patel Over a year ago

you should use this.props.listItems insted of this.state.items

Dhaval Patel Over a year ago

actually whatever you have done in your child component do it in parent and apply the filter on state data once state changed it would automatically call the render method and your view updated

David Street · Accepted Answer · 2015-11-25 14:09:19Z

0

The context of this inside the map function does not reference the enclosing React class. In order to reference the React class using this inside the map function, pass this to the map function:

var listItems = this.props.listItems.map(fn, this)

answered Nov 25, 2015 at 14:09

David Street

511 bronze badge

Comments

Abhinav Singi · Accepted Answer · 2015-11-25 14:21:41Z

0

If you're using ES6 - you can use Arrow functions for lexical binding. Also, the best way to handle adding/updating/deleting items in your list is to use Immutability helpers provided by React

var listItems = this.props.listItems.map( submittedValue => {
      <ToDoListItem key={submittedValue.id}>{submittedValue.text}<button onClick={this.deleteItem}> X </button></ToDoListItem>
});

edited Nov 25, 2015 at 14:21

answered Nov 25, 2015 at 14:16

Abhinav Singi

3,4291 gold badge22 silver badges27 bronze badges

Collectives™ on Stack Overflow

Delete list item ReactJS

4 Answers 4

7 Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related