Implement delete function on ReactJS To Do App

Question

I have been creating this to do list using React JS. I'm new to React and not sure of how to remove a to do item or set it as complete. Would appreciate some ideas from anyone on how to approach this. Do I create a function in the ListContainer or on the Item for example?

Cheers in advance!

Here is my code and a live example:

Codepen example

var ListContainer = React.createClass({
  getInitialState: function() {
    return {
      numChildren: 0,
      list: []
    };
  },
  onAddChild: function() {
    var inputValue = document.getElementById('itemAdder').value;
    var ul = document.getElementById('list');

    var newList = this.state.list;
    if(inputValue !== '') {
      newList.push(inputValue);
      ul.style.display = 'block';
    }
    this.setState({
      numChildren: this.state.numChildren + 1,
      list: newList
    });
  },
  render: function() {
    var children = [];
    for (var i = 0; i < this.state.list.length; i++) {
      children.push(<Item key={'item_' + i} number={i} content={this.state.list[i]}/>);
    };
    return (
      <List addChild={this.onAddChild}>
        {children}
      </List>
    );
  }
});

var List = React.createClass({
  render: function() {
    return (
      <div id="listContainer">
        <h1 className="no-margins even-padding page-header ">To do list</h1>
        <div className="even-padding form-inline">
          <input type="text" name="itemAdder" id="itemAdder" className="form-control" placeholder="Enter things that need doing..." />
          <button type="button" className="btn btn-primary" onClick={this.props.addChild}>Add item</button>
          <ul id="list" className="no-margins list">
            {this.props.children}
          </ul>
        </div>
      </div>
    );
  }
});

var Item = React.createClass({
  render: function() {
    var key = this.props.index;
    return (
      <li className="clearfix">
        {this.props.content}
        <div className="pull-right">
          <button id="completed" className="btn btn-success btn-xs">&#x2714;</button>
          <button id="remove" className="btn btn-danger btn-xs">&#x2718;</button>
        </div>
      </li>
    );
  }
});

var App = React.createClass({
  render: function() {
    return (
      <div id="main" className="page-wrap">
        <ListContainer />
      </div>
    );
  }
});

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

diedu · Accepted Answer · 2016-12-15 20:41:55Z

1

Add a handler to delete the element in the ListContainer component

  onDeleteChild: function(index) {   
    this.state.list.splice(index,1);
    this.setState({list: this.state.list });
  },

Pass the index and the handler to each Item component

        children.push(<Item key={'item_' + i} index={i} number={i} onDeleteChild={this.onDeleteChild.bind(this)} content={this.state.list[i]}/>);

In the Item component call the handler in onClick event of the delete button

var Item = React.createClass({
  delete: function(){
   this.props.onDeleteChild(this.props.index);
  },

  render: function() {
    var key = this.props.index;
    return (
      <li className="clearfix">
        {this.props.content}
        <div className="pull-right">
          <button id="completed" className="btn btn-success btn-xs">&#x2714;</button>
          <button id="remove" onClick={this.delete} className="btn btn-danger btn-xs">&#x2718;</button>
        </div>
      </li>
    );
  }
});

Some readings

https://facebook.github.io/react/docs/thinking-in-react.html https://facebook.github.io/react/docs/lifting-state-up.html

answered Dec 15, 2016 at 20:41

diedu

20.9k4 gold badges40 silver badges53 bronze badges

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

4 Comments

Ryan Mc Over a year ago

Thanks. This almost worked properly except that it deletes the wrong item. Like when I click delete it deletes an item but the one I clicked on still remains.

Ryan Mc Over a year ago

OK, I saw the problem. You used this.props.onDeleteChild(this.props.index); but the element doesnt have a prop called index. I used number instead and it worked. Cheers

diedu Over a year ago

yep, I added the index prop to Item component, I didn't realize that you were passing the index with the name of number.

Ryan Mc Over a year ago

Yeah some of the code is a bit of a mess, could do with refactoring it. Number is a left over from the code I based it on but dont really need it now.

Collectives™ on Stack Overflow

Implement delete function on ReactJS To Do App

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related