title: Populate React prop object from async function
body: <p>My high level goal here is to be able to read data from text files onto a page I'm creating using React.</p>
  
  <p>I have a utility script file that I'm using to read the file by path:</p>
  
  <pre><code>//reader.js
  window.readFile = function(filePath, callback) {
    var request = new XMLHttpRequest();
    request.open("GET", filePath, true);
    request.send(null);
    request.onreadystatechange = function() {
      if (request.readyState === 4 &amp;&amp; request.status === 200) {
        var type = request.getResponseHeader('Content-Type');
        if (type.indexOf("text") !== 1) {
          callback(null, request.responseText);
        }
      }
    }
  }
  </code></pre>
  
  <p>I'm calling that function like so in one of my React component files:</p>
  
  <pre><code>//component.js
  var data = {};
  
  populateData();
  
  function populateData() {
    data.subject = "FILE TITLE";
    data.title = "FILE SUBJECT";
    window.readFile("../path/to/file", function(error, results){
      if (!error) {
        data.content = results;
      }
      else {
        console.log(error);
      }
    });
  }
  
  var Content = React.createClass({
    render: function() {
      return (
        &lt;FileContent { ...data } /&gt;
      );
    }
  });
  </code></pre>
  
  <p>I've tested that the function gets ran correctly from this context, but it would appear that due to the async nature of the readFile function, my data object's content field never gets populated with the text from the file. Is there a synchronous way of returning what I need, or how can I solve this asynchronously?</p>