title: React - passing jSON data to child of child components
body: <p>I am building an image grid which has three components: the parent Playlist.js component, inside which is the PlayListAlbumsList.js component, inside which resides the PlaylistAlbumInfoOverlay.js component.</p>
  
  <p>I've got the PlaylistAlbumsList.js successfully loading images from my JSON file with their classNames and keys, but now I need to grab {list.albumTitle} and get that into the h1 of the PlaylistAlbumInfoOverlay.js component.</p>
  
  <p>I'm not sure how to configure it. Here are the three components:</p>
  
  <p><strong>THE PARENT PLAYLIST COMPONENT:</strong></p>
  
  <pre><code>import React from 'react';
  import PlaylistAlbumsList from './PlaylistAlbumsList';
  
  var data;
  $.getJSON("./json/playlist.json", function(json){
      data = json;
  });
  
  var Playlist = React.createClass({
  
      getInitialState: function() {
      return {
        currentPlaylist: []
      };
    },
  
    componentDidMount: function() {
        var playlistImages = [];
  
        // Fake an AJAX request with a setTimeout function
        setTimeout(function(){ 
          playlistImages=data.images;
  
          // Set state when the request completes
          this.setState({
            currentPlaylist: playlistImages
          });
  
        }.bind(this), 10);
    },
  
    render() {
      return (
          &lt;div id="playlist_page"&gt;
            &lt;div className="grid-wrap"&gt;
              &lt;PlaylistAlbumsList list={this.state.currentPlaylist} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      )
    }
  
  });
  
  module.exports = Playlist;
  </code></pre>
  
  <p><strong>THE CHILD UL COMPONENT:</strong></p>
  
  <pre><code>import React from 'react';
  import PlaylistAlbumInfoOverlay from './PlaylistAlbumInfoOverlay';
  
  var PlaylistAlbumsList = React.createClass({
  
    render: function() {
  
      return (
        &lt;ul className="container-fluid"&gt;
          {this.props.list.map(function(list){
            return (
              &lt;li className={list.className} key={list.id}&gt;
                &lt;PlaylistAlbumInfoOverlay /&gt;
                &lt;img src={list.src} width='100%' /&gt;
              &lt;/li&gt;
            )
          }.bind(this))}
        &lt;/ul&gt;
      )
  
    }
  });
  
  module.exports = PlaylistAlbumsList;
  </code></pre>
  
  <p><strong>THE CHILD OF CHILD OVERLAY COMPONENT:</strong></p>
  
  <pre><code>import React from 'react';
  
  const PlaylistAlbumInfoOverlay = () =&gt; (
  
    &lt;div className="playlist-album-info-overlay"&gt;
      &lt;h2&gt;{list.albumTitle}&lt;/h2&gt; // doesn't work 
    &lt;/div&gt;
  );
  
  PlaylistAlbumInfoOverlay.propTypes = {
    albumTitle: React.PropTypes.string // doesn't work
  };
  
  export default PlaylistAlbumInfoOverlay;
  </code></pre>