title: React js: Can´t send first object in array as prop
body: <p>Im trying to build an small React.js application and my component structure looks like this:</p>
  
  <pre><code>MainComponent
      - CategoryList
          -Category
      - ItemsList 
          -Item
  </code></pre>
  
  <p>My MainContent component does an ajax request for its state data in the <code>componentDidRender:</code> which returns this object:</p>
  
  <pre><code>data:[
  Object[0]
   -name
   -items[]
  ,
  Object[1],
  Object[2]
  ]
  </code></pre>
  
  <p>Now, I want my CategoryList to write out all the Categories by name, which works just fine, but I also want to print out the items of the selected category. This is my ItemsList component:</p>
  
  <pre><code> var ItemsList = React.createClass({
      render:function(){
  
           var itemNodes = this.props.category.items.map(function(item){
              return (
                  &lt;Item name={item.name} /&gt;
              );
          });
  
          return(
              &lt;div className="itemList"&gt;
              {itemNodes}
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>And this is how I pass on the "category"-property from my the parent component</p>
  
  <pre><code>&lt;ItemsList category={this.state.data[0]} /&gt;
  </code></pre>
  
  <p>I get an error say "Can´t read property items of undefined" meaning that the category prop never was assigned. I know that this.state.data contains an array of objects so I don´t see the error here.</p>
  
  <p>What do I do wrong?</p>
  
  <p>EDIT: Per request, this is my MainComponent:</p>
  
  <pre><code>var MainComponent = React.createClass({
      getInitialState:function(){
          return {data: []};
      },
      componentDidMount:function(){
          $.ajax({
              type:'get',
              url: '/categories',
              dataType: 'json',
              success:function(data){
                  this.setState({data: data});
              }.bind(this)
  
          });
      },
      render: function(){
          return (
          &lt;div className="row"&gt;
              &lt;div className="col-md-6"&gt;
                  &lt;CategoryList categories={this.state.data} /&gt;
              &lt;/div&gt;
              &lt;div className="col-md-6"&gt;
              &lt;ItemsList category={this.state.data[0]} /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          );
      }
  });
  </code></pre>