CODEWITHSUNDEEP
javascriptfirebasereactjs
Ricardo Magalhães
Ricardo Magalhães

Reputation: 1861

Delete node from Firebase using React and firereact

I'm pretty puzzled by the way reactfire works, as there doesn't seem to much about it documentation-wise.

So I want to delete and update some child nodes, but I have no idea how to do it. All tutorials focus solely in retrieving data, which are treated as a regular array and I don't even seem to get access to their keys.

Here's the official example: https://www.firebase.com/blog/2014-05-01-using-firebase-with-react.html

How do perform these operations using React?

Once you instantiate FB:

```
this.fb = new Firebase('https://react-testing.firebaseio.com/items');
this.bindAsArray(this.fb, 'items');
```

'items' becomes bound to this.state.items. Cool, now I have the data.

But how do I manipulate it? What's the correct way of getting a reference to the item being passed?

Upvotes: 3

Views: 1379

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598728

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 its capabilities, you can easily expand on 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]);
  }
}

To this:

for (var key in obj) {
  if (obj.hasOwnProperty(key)) {
    var item = obj[key];
    item['$id'] = key;
    out.push(item);
  }
}

So we now pass the key() of each item as a "special" $id property of the item in the array.

With that I can expand the TodoList3 class of the original 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 we now identify the Todo items by their $id/key(), instead of their index and use that value when the user clicks the item.

With that we can expand the JSX of TodoApp3 to pass in a handler for when the user clicks an item:

<TodoList3 items={ this.state.items } onClick={this.handleClick} />

And the app will then delete the item, by calling into the regular Firebase JavaScript SDK.

handleClick: function(key) {
  var firebaseRef = this.state.ref;
  firebaseRef.child(key).remove();
},

Links:

Upvotes: 4

Related Questions