title: Passing AJAX Results As Props to Child Component
body: <p>I'm trying to create a blog in React. In my main ReactBlog Component, I'm doing an AJAX call to a node server to return an array of posts. I want to pass this post data to different components as props.</p>
  
  <p>In particular, I have a component called PostViewer that will show post information. I want it to by default show the post passed in from its parent via props, and otherwise show data that is set via a state call.</p>
  
  <p>Currently, the relevant parts of my code looks like this.</p>
  
  <pre><code>var ReactBlog = React.createClass({
    getInitialState: function() {
      return {
        posts: []
      };
    },
    componentDidMount: function() {
      $.get(this.props.url, function(data) {
        if (this.isMounted()) {
          this.setState({
            posts: data
          });
        }
      }.bind(this));
    },
    render: function() {
      var latestPost = this.state.posts[0];
      return (
        &lt;div className="layout"&gt;
          &lt;div className="layout layout-sidebar"&gt;
            &lt;PostList posts={this.state.posts}/&gt;
          &lt;/div&gt;
          &lt;div className="layout layout-content"&gt;
            &lt;PostViewer post={latestPost}/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  });
  </code></pre>
  
  <p>and the child component:</p>
  
  <pre><code>var PostViewer = React.createClass({
    getInitialState: function() {
      return {
        post: this.props.post
      }
    },
    render: function() {
      /* handle check for initial load which doesn't include prop data yet */
      if (this.state.post) {
        return (
          &lt;div&gt;
            {this.state.post.title}
          &lt;/div&gt;
        )
      }
      return (
        &lt;div/&gt;
      )
    }
  });
  </code></pre>
  
  <p>The above works if I swap out the if statement and content in my child's render to this.props.* However, this would mean that I couldn't change the content later via state, correct?</p>
  
  <p>TLDR: I want to set a default post to be viewed via props in a child component (results of an AJAX call), and I want to be able to change what post is being viewed by adding onClick events (of another component) that will update the state.</p>
  
  <p>Is this the correct way to go about it?</p>
  
  <p>Current hierarchy of my app's components are:</p>
  
  <pre><code>React Blog
   - Post List
    - Post Snippet (click will callback on React Blog and update Post Viewer)
   - Post Viewer (default post passed in via props)
  </code></pre>
  
  <p>Thanks!</p>
  
  <p><strong><em>EDIT:</em></strong></p>
  
  <p>So what I ended up doing was attaching the props in ReactBlog using a value based on this.state. This ensured that it updates when I change state and renders correctly in child components. However, to do this I had to chain onClick callbacks up through all the various child components. Is this correct? It seems like it could get VERY messy. Here's my full example code:</p>
  
  <pre><code>var ReactBlog = React.createClass({
    getInitialState: function() {
      return {
        posts: [],
      };
    },
    componentDidMount: function() {
      $.get(this.props.url, function(data) {
        if (this.isMounted()) {
          this.setState({
            posts: data,
            post: data[0]
          });
        }
      }.bind(this));
    },
    focusPost: function(slug) {
      $.get('/api/posts/' + slug, function(data) {
        this.setState({
          post: data
        })
      }.bind(this));
    },
    render: function() {
      return (
        &lt;div className="layout"&gt;
          &lt;div className="layout layout-sidebar"&gt;
            &lt;PostList handleTitleClick={this.focusPost} posts={this.state.posts}/&gt;
          &lt;/div&gt;
          &lt;div className="layout layout-content"&gt;
            &lt;PostViewer post={this.state.post}/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  });
  
  var PostList = React.createClass({
    handleTitleClick: function(slug) {
      this.props.handleTitleClick(slug);
    },
    render: function() {
      var posts = this.props.posts;
  
      var postSnippets = posts.map(function(post, i) {
        return &lt;PostSnippet data={post} key={i} handleTitleClick={this.handleTitleClick}/&gt;;
      }, this);
  
      return (
        &lt;div className="posts-list"&gt;
          &lt;ul&gt;
            {postSnippets}
          &lt;/ul&gt;
        &lt;/div&gt;
      )
    }
  });
  
  var PostSnippet = React.createClass({
    handleTitleClick: function(slug) {
      this.props.handleTitleClick(slug);
    },
    render: function() {
      var post = this.props.data;
      return (
        &lt;li&gt;
          &lt;h1 onClick={this.handleTitleClick.bind(this, post.slug)}&gt;{post.title}&lt;/h1&gt;
        &lt;/li&gt;
      )
    }
  });
  
  var PostViewer = React.createClass({
    getInitialState: function() {
      return {
        post: this.props.post
      }
    },
    render: function() {
      /* handle check for initial load which doesn't include prop data yet */
      if (this.props.post) {
        return (
          &lt;div&gt;
            {this.props.post.title}
          &lt;/div&gt;
        )
      }
      return (
        &lt;div/&gt;
      )
    }
  });
  </code></pre>
  
  <p>Still hoping to get some feedback / hope this helps!</p>