React js: Unable to send first object to array as prop

Question

Im trying to create a small React.js application, and my component structure looks like this:

MainComponent - CategoryList -Category - ItemsList -Item 

My MainContent component makes an ajax request for its state data in componentDidRender: which this object returns:

 data:[ Object[0] -name -items[] , Object[1], Object[2] ] 

Now I want my category list to list all categories by name, which works fine, but I also want to print the elements of the selected category. This is my ItemsList component:

  var ItemsList = React.createClass({ render:function(){ var itemNodes = this.props.category.items.map(function(item){ return ( <Item name={item.name} /> ); }); return( <div className="itemList"> {itemNodes} </div> ); } }); 

And this is how I pass the "category" property from my parent component

 <ItemsList category={this.state.data[0]} /> 

I get an error: "Can't read properties items of undefined" means that categorical support has never been assigned. I know that this.state.data contains an array of objects, so I don't see an error here.

What am I doing wrong?

EDIT: on request, this is my main component:

 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 ( <div className="row"> <div className="col-md-6"> <CategoryList categories={this.state.data} /> </div> <div className="col-md-6"> <ItemsList category={this.state.data[0]} /> </div> </div> ); } }); 

Answer 1

Your main component initializes the state with an empty array in data . The reserve will always fail because there is no this.state.data[0] .

Probably answer that the ajax request will provide a value for this data state property (suppose your web service provides a valid array). However , this only happens after the response has been received from the server, which will not happen after the first render.

If the information was immediately available, setState use the componentWillMount method or the component constructor to not run the second render:

componentWillMount () is called immediately before installation. This is called before render (), so setting the state to this method synchronously will not result in re-rendering. Avoid introducing any side effects or subscriptions in this method.

In this case, since we are waiting for deleted information, the React documentation still recommends using componentDidMount , and also using it here:

componentDidMount () is called immediately after the component is installed. Initialization requiring DOM nodes should go here. if you need to download data from a remote endpoint, this is a good place to create an instance of a network request. The setting state in this method will cause re-rendering.

Therefore, the component rendering method must be able to handle the missing state variable. There are several ways to approach this, but preventing imaging sub-element as long as the data will not be the easiest. Using some additional logic, the application can inform the user about the loading of a specific component.

 render() { return ( <div className="row"> <div className="col-md-6"> <CategoryList categories={this.state.data} /> </div> <div className="col-md-6"> {this.state.data.length > 0 && <ItemsList category={this.state.data[0]} /> } </div> </div> ); }