I am having trouble passing in my backbone collection in to a react component

Question

my backbone collection collection doesn't populate when i just pass it in as props to a react component. I have tried first fetching the collection using componentDidmount and componentWillMount, but that still didn't populate the collection. If I test the code by setting a window variable pointing to DecksIndex and in the console tools call getInstance() and then fetch ,the data loads fine. my code is as follows:

 //router.js
var DeckComponent = require("./views/deck.jsx")
var DecksIndex = React.createFactory(require("./views/decks.jsx"))
var decksCollection = require("./component/collections/decks.js");

module.exports = Backbone.Router.extend({

    initialize: function(){
        this.rootEl = document.getElementById('container');
    },

    routes: {
        "":"index",
        "decks/:id":"deckShow"
    },

    index: function(){

        var decks = new DecksIndex({decks: decksCollection.getInstance()});
        this._swapView(decks)
        console.log("hooray!")
    },

    deckShow: function(id){
        //var deck = Flashcards.Collections.decks.getOrFetch(id);
        var showDeck = new DeckComponent();
        this._swapView(showDeck);
    },

    _swapView: function(view){
        if (this.currentView) {
            React.unmountComponentAtNode(this.rootEl);
        }
        this.currentView = view
        React.render(view, document.getElementById('container'));
    }   

});


//decks.js

var deck = require('../models/deck.js')
var decks = Backbone.Collection.extend({
  url: "/api/decks",
  model: deck,
  getOrFetch: function(id){
        var model = this.get(id);
        var that = this;
        if (model) {
            model.fetch();
        }else{
            model = new deck({id: id})
            model.fetch({
                success: function(){
                    that.add(model)
                }
            })
        }
        return model;
    },

    parse: function (data) {
        debugger;
        return data.objects
    },

});

decks.getInstance = _.memoize(function () {
  return new decks();
});

module.exports = decks;

//decks.jsx
var DecksList = React.createClass({

    render: function() {

            return (
              <div className="deck-list">
              {
                this.props.decks.map(function (deck) {
                    var title = deck.name
                    debugger;
                  return (
                    <div key={deck.id} className="note-summary">
                      {title}
                    </div>
                  );
                })
              }
              </div>
            );
      }
});

module.exports = DecksList;

Answer 1

this is an example of a situation where a container component that manages state makes sense. If DecksList had a container that retrieved the collection when it mounted and only rendered DecksList once the data was available it would probably solve the problem. Here's a good article on the pattern: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0