javascript - Never reaching my function call - ReactJs 0.12.0 -

i have jsbin throws no console errors aside show down request fails. aside that, specific code there no errors, yet never reaches specific point.

the following jsbin has issue. code works, intents , purposes doesn't @ same time. if at:

please note following, far can tell, valid reactjs code.

/**  * component display individual post.  */ var displayposts = react.createclass({   render: function() {     if (this.props.posts === null) {       return (<div></div>);     }      var markdown = new showdown.converter();      var post = this.props.posts.slice(0, 4).map(function(post) {       var content = markdown.makehtml(post.content)       return (         <div>           <div classname="single-post" key={post.id}>             <h3><a href={"http://writer.aisisplatform.com/blog#post/" + post.title}>{post.title}</a></h3>             <span dangerouslysetinnerhtml={{__html: content.split(/\s+/).slice(0, 40).join(' ') + '...'}} />             <hr />             <div classname="float-right">               <i classname="fa fa-comments"></i> {post.comments.length}             </div>           </div>         </div>       );     });      return (       <div>{post}</div>     )   } }); 

and place console.log inside this.props.posts.slice(0, 4).map(function(post) { never reach there. place 1 out side, reach there. place 1 after block, reach there. place 1 inside - never reach there.

what going on?

when array.slice() called on [] returns []. then, when array.map called on [] never calls iterator function.

so looks this.props.posts empty array in case.