Remove node from Firebase using React and firereact
I'm very confused about how firefire reacts as it doesn't seem to be much documented.
So, I want to delete and update some of the child nodes, but I have no idea how. All of the tutorials focus solely on fetching data, which is treated like a regular array and I don't even see access to their keys.
Here's an official example: https://www.firebase.com/blog/2014-05-01-using-firebase-with-react.html
How do I perform these operations with React?
Once you instantiate the FB:
```
this.fb = new Firebase('https://react-testing.firebaseio.com/items');
this.bindAsArray(this.fb, 'items');
```
'items' binds to this.state.items. Cool, now I have data.
But how can I manipulate him? What is the correct way to get a reference to the passed item?
source to share
As I said in my comment: ReactFire is a tiny wrapper around a small subset of the regular Firebase JavaScript SDK. If you want to build an application beyond your capabilities, you can easily extend it.
For your request, I went ahead and changed the following snippet in ReactFire:
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
out.push(obj[key]);
}
}
For this:
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var item = obj[key];
item['$id'] = key;
out.push(item);
}
}
So now we are passing key()
each item as a "special" property of the $id
item in the array.
With this, I can extend the TodoList3
original class to this:
var TodoList3 = React.createClass({
handleClick: function(key) {
if (this.props.onClick) {
this.props.onClick(key);
}
},
render: function() {
var list = this;
var createItem = function(item) {
var boundClick = list.handleClick.bind(list, item['$id']);
return <li key={ item['$id'] } onClick={boundClick}>{ item.text }</li>;
};
return <ul>{ this.props.items.map(createItem) }</ul>;
}
});
So now we identify Todo objects by their $id
/ key()
instead of their index and use this value when the user clicks the item.
With that, we can deploy the TodoApp3 JSX to pass in the handler when the user clicks on the element:
<TodoList3 items={ this.state.items } onClick={this.handleClick} />
The app will then remove the item by calling it in the standard Firebase JavaScript SDK.
handleClick: function(key) {
var firebaseRef = this.state.ref;
firebaseRef.child(key).remove();
},
Links:
source to share