CODEWITHSUNDEEP
javascriptreactjs
Ryan Mc
Ryan Mc

Reputation: 925

Implement delete function on ReactJS To Do App

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

Upvotes: 0

Views: 418

Answers (1)

diedu
diedu

Reputation: 20785

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

Upvotes: 1

Related Questions