title: React.js this.props.data.map() is not a function
body: <p>I'm messing around with react and trying to parse and render a json object. Right now, I'm just setting it with a hard-coded object for testing and not getting it from an ajax call. </p>
  
  <pre><code>&lt;script type="text/jsx"&gt;
  
  var Person = React.createClass({
  render: function() {
    return (
      &lt;div&gt;
        &lt;p className="personName"&gt;&lt;/p&gt;
        &lt;p className="personSA1"&gt;&lt;/p&gt;
        &lt;p className="personSA2"&gt;&lt;/p&gt;
        &lt;p className="zip"&gt;&lt;/p&gt;
        &lt;p className="state"&gt;&lt;/p&gt;
        &lt;p className="country"&gt;&lt;/p&gt;
      &lt;/div&gt;
    );
   }
  });
  
  var PersonDiv = React.createClass({
  render: function() {
    var personNodes = this.props.data.map(function(personData){
      return (
        &lt;Person
          personName={personData.person.firstname}
          personSA1={personData.person.street1}
          personSA2={personData.person.street2}
          zip={personData.person.zip}
          state={personData.person.state}
          country={personData.person.country}&gt;
        &lt;/Person&gt;
      )
  });
  return (
    &lt;div&gt;
      {personNodes}
    &lt;/div&gt;
  );
  }
  });
  
  React.render(
   &lt;PersonDiv data={data} /&gt;,
  document.getElementById('jsonData')
  );
  </code></pre>
  
  <p>I'm setting the data variable with </p>
  
  <pre><code>&lt;script&gt;
    var data = "[" + '&lt;%=data%&gt;' + "]";
  &lt;/script&gt;
  </code></pre>
  
  <p>The data object is one that I'm creating on the java side of a portlet. I know that the json is valid, because I can use JSON.parse(json) to parse and traverse the string, but I keep getting that map() is not a function.</p>