How do I use callback value in server-side React component?
<p>I'm having trouble using server-side React to display a list of players from my Mongo database.</p>

<p>My goal is to <strong>NOT</strong> use external libraries aside from <code>mongodb</code> and <code>react</code> because I'd like to learn the underlying concepts before I start implementing advanced solutions.</p>

<p>My code requires a module (<code>players.js</code>) and invokes a callback defined in <code>index.jsx</code> that should process the Mongo query results. These process results should be accessible by the component.</p>

<p>Here it is:</p>

<p><code>players.js</code></p>

<pre><code>var MongoClient = require('mongodb').MongoClient;

var url = 'mongodb://localhost/collection';
var database;
var players;

module.exports = function(callback) {

    // Initialize collection
    MongoClient.connect(url, function(err, db) {
        database = db;
        database.collection('players', findPlayers);
    });

    // This named callback function is here in case
    // I want to do anything else with the collection
    function findPlayers(err, collection) {
        collection.find({}, getCursor);
    }

    function getCursor(err, cursor) {
        cursor.toArray(function(err, players) {
            // Invoke callback with err and players array
            callback(err, players);

            // Close Mongo connection
            database.close();   
        });
    }
}
</code></pre>

<p><code>index.jsx</code></p>

<pre><code>var React = require('react');
var players = require('./players');

// call module and pass processPlayers function
var competitors = players(processPlayers);

// with the query results, return some neat JSX code
function processPlayers(err, results) {
    return results.map(function(player) {
        return (
            &lt;tr&gt;
                &lt;td&gt;{ player.rank }&lt;/td&gt;
                &lt;td&gt;{ player.name }&lt;/td&gt;
            &lt;/tr&gt;
        )
    });
}

// Create index component class
var Index = React.createClass({
    render: function() {
        return ( &lt;main&gt;&lt;table&gt;{ competitors }&lt;/table&gt;&lt;/main&gt; );
    }
});

// Export component
module.exports = Index;
</code></pre>

<p>I understand that in <code>index.jsx</code> I'm setting <code>competitors</code> to an undefined return, but that's because I am stuck. How do I set <code>competitors</code> to the mapped results?</p>

<p>Again, I am <em>NOT</em> looking for promises or the async library. <em>I want to learn the basics and proper code structure.</em> I'll even be glad to look at related library source code if provided.</p>

<p>Thank you!</p>