React.js modify state of parent from button

Question

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

possible duplicate of Getting Index of onClick target with ReactJs — jdlm
– jdlm, Commented Apr 15, 2015 at 4:28

David Hellsing · Accepted Answer · 2015-04-15 06:58:18Z

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/

answered Apr 15, 2015 at 6:58

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

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

2 Comments

user1594257 Over a year ago

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?

David Hellsing Over a year ago

@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.

Community · Accepted Answer · 2017-05-23 10:10:10Z

0

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

edited May 23, 2017 at 10:10

CommunityBot

11 silver badge

answered Apr 15, 2015 at 4:28

jdlm

6,7545 gold badges34 silver badges50 bronze badges

Collectives™ on Stack Overflow

React.js modify state of parent from button

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related