Uncaught TypeError: Cannot read property 'pare

Question

I have never got this before, I can only assume it cannot find the div element it is trying to render too? Which doesn't make sense because when I console.log the element in question before and after the event fires it exists, but the error is thrown ....

The following is a backbone view - rendering a reactjs component, we pass in deleteEvent: this.handleDeleteEvent.bind(this) which allows us to click delete in a row and it will bubble that up the event and walk through, essentially re calling the collection and re-rendering the component.

But its the React.renderComponent() that is causing the issue at hand:

AisisWriter.Views.PostIndex = AisisWriter.Views.CoreView.extend({

  writer_posts: new AisisWriter.Collections.Posts(),

  handleDeleteEvent: function(id){
    var toDelete = new AisisWriter.Models.Post();
    toDelete.set({id: id});
    toDelete.destroy().then(this.deleted(id), this.failedToDelete);
    return false
  },

  deleted: function(id) {
    var options = { reset: true };
    this.writer_posts.fetch(options).then(this.postsRecieved.bind(this), this.serverError);
  },

  postsRecieved: function(collection, response, options) {
    this.render(collection);

    if ($('#flash-error').is(':visible')){
      $('#flash-error').hide();
    }

    $('#flash-success').show();
  },

  serverError: function() {
    if ($('#flash-success').is(':visible')){
      $('#flash-success').hide();
    }

    $('#flash-error').show();
  },

  failedToDelete: function() {
    if ($('#flash-success').is(':visible')){
      $('#flash-success').hide();
    }

    $('#flash-error').show();
  },

  render: function(postsObject) {
    element = this.getElement();

    var totalPerPage = postsObject.total_pages.total;
    var posts = postsObject.posts;

    React.renderComponent(new PostTable({posts: posts, maxPages: totalPerPage, deleteEvent: this.handleDeleteEvent.bind(this)}), element);
  }

});

The first time this render - great it works. You see a table with posts and then which you click delete it comes all the way through - removing it from the model, recalling the collection all the way to render. From there it gets the total pages, the posts and then passes them to the component, its at that stage I get:

Uncaught TypeError: Cannot read property 'parentNode' of undefined

Does any one have any ideas?

Answer 1

In your PostTable component, are you explicitly rendering a <tbody> element? Some browsers will automatically add one after initial render which can cause this issue. Rendering <tbody> explicitly should resolve the issue.