title: React components won't render; only seeing data-reactid=".0"
body: <p>I'm creating my first React app, so apologies in advance. A newbie must learn as he goes.</p>
  
  <p>But I'm a few hours into debugging, having gotten nowhere, and I'm hoping someone can clarify why this attempt to pass data into a React component, use prototype.map, and render a final component just isn't cutting it.</p>
  
  <pre><code>var imagedata = [{"id":"1"},{"id":"2"},{"id":"3"}];
  
  var portraitPhoto = React.createClass({
    render: function() {
      return (
      &lt;div className="test"&gt;
        &lt;img src={"./build/assets/images/photos/square_raw/" + this.props.imagepath + ".jpg"} 
          className="full-width-portrait" /&gt;
        &lt;/div&gt;
      );
    }
  });
  
  
  var portrait = React.createClass({
      getDefaultProps: function(){
      return {
        data: imagedata
      }
    },
    render: function() {
      var portraitEach = this.props.data.map(function (imaged,i) {
            return (
                  &lt;div className="portrait2"&gt;
                      &lt;portraitPhoto imagepath={imaged.id}/&gt;
                  &lt;/div&gt;
            );
          });
      return (
         &lt;div className="portrait-container"&gt;
              {portraitEach}
          &lt;/div&gt;
      );
    }
  });
  
  React.render(
    &lt;portrait/&gt;,
    document.getElementById('portraits')
  );
  </code></pre>