CODEWITHSUNDEEP
javascripthtml-listsreactjs
The Hurricane
The Hurricane

Reputation: 199

Delete list item ReactJS

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

Upvotes: 0

Views: 1862

Answers (4)

Dhaval Patel
Dhaval Patel

Reputation: 7591

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

Upvotes: 1

Abhinav Singi
Abhinav Singi

Reputation: 3399

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

Upvotes: 0

David Street
David Street

Reputation: 51

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)

Upvotes: 0

Oleksandr T.
Oleksandr T.

Reputation: 77482

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

Upvotes: 1

Related Questions