0

I'm just digging into Reactjs. In my crude example I would like the delete button to remove an item from the items array. How would I do this from handleClick in the Btn component? Or what is the best way to handle this?

var data= {
"items": [
    {
        "title": "item1"
    },
    {
        "title": "item2"
    },
    {
        "title": "item3"
    }
]
};



var Btn = React.createClass({

handleClick: function(e) {
console.log('clicked delete'+ this.props.id);
  //how does delete button modify this.state.items in TodoApp?

},
render: function() {
return <button onClick={this.handleClick}>Delete</button>;
}
});

var TodoList = React.createClass({

render: function() {
var createItem = function(itemText, index) {
  return <li key={index + itemText}>{itemText} &nbsp;<Btn id={index} /></li>;
};
return <div><ul>{this.props.items.map(createItem)}</ul></div>;
}
});



var TodoApp = React.createClass({

getInitialState: function() {
  console.log("getInitialState");

return data;
  },



  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});



React.render(<TodoApp />, document.getElementById('container'));

JSFiddle example

user1594257
  • 487
  • 1
  • 4
  • 16
  • possible duplicate of [Getting Index of onClick target with ReactJs](http://stackoverflow.com/questions/29142646/getting-index-of-onclick-target-with-reactjs) – jdlm Apr 15 '15 at 04:28

2 Answers2

0

By sending a callback to your Btn component. Explained further in this answer.

Community
  • 1
  • 1
jdlm
  • 6,327
  • 5
  • 29
  • 49
0

The Flux way would be to update your data store and trigger a render of your app, f.ex:

var deleter = function(id) {
  data.items.splice(id,1)
  React.render(<TodoApp />,
    document.getElementById('container'));
}

[...]

handleClick: function(e) {
    deleter(this.props.id)
}

Demo: http://jsfiddle.net/s01f1a4a/

David Hellsing
  • 106,495
  • 44
  • 176
  • 212
  • So would this simple app fit into the Flux pattern with Action, Dispatcher, Store and View? When the render is called again in deleter is that a diff or a complete re-render? Should this app have an "adder" to add a row instead the current way it is implemented? – user1594257 Apr 15 '15 at 14:30
  • @user1594257 Yes, it would fit, but when I wrote Flux, I mainly meant the uni-directional data principle, not necessarily the framework. No, it’s not a complete render, just a diff. Yes, you should have an adder function as well. – David Hellsing Apr 15 '15 at 14:40