javascript - Trouble getting data from JSON with ReactJS -

i have json file this, named data.json

{   "link_template": "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit={num-results}&country={country-code}",   "links": {     "alternate": "http://www.rottentomatoes.com/movie/box-office/",     "self": "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit=20&country=us"   },   "movies": [     {       "abridged_cast": [         {           "characters": [             "dominic toretto"           ],           "id": "162652472",           "name": "vin diesel"         },         {           "characters": [             "brian o'conner"           ],           "id": "162654234",           "name": "paul walker"         },         {           "characters": [             "louie tran"           ],           "id": "162684066",           "name": "tony jaa"         },         {           "characters": [             "deckard shaw"           ],           "id": "162653720",           "name": "jason statham"         },         {           "characters": [             "luke hobbs"           ],           "id": "770893686",           "name": "dwayne \"the rock\" johnson"         }       ],       "alternate_ids": {         "imdb": "2820852"       },       "critics_consensus": "",       "id": "771354922",       "links": {         "alternate": "http://www.rottentomatoes.com/m/furious_7/",         "cast": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/cast.json",         "reviews": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/reviews.json",         "self": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922.json",         "similar": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/similar.json"       },       "mpaa_rating": "pg-13",       "posters": {         "detailed": "http://resizing.flixster.com/pvdoql2vctznnu0t6z0eule5g_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",         "original": "http://resizing.flixster.com/pvdoql2vctznnu0t6z0eule5g_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",         "profile": "http://resizing.flixster.com/pvdoql2vctznnu0t6z0eule5g_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",         "thumbnail": "http://resizing.flixster.com/pvdoql2vctznnu0t6z0eule5g_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg"       },       "ratings": {         "audience_rating": "upright",         "audience_score": 88,         "critics_rating": "certified fresh",         "critics_score": 82       },       "release_dates": {         "theater": "2015-04-03"       },       "runtime": 140,       "synopsis": "continuing global exploits in unstoppable franchise built on speed, vin diesel, paul walker , dwayne johnson lead returning cast of fast & furious 7. james wan directs chapter of hugely successful series welcomes favorites michelle rodriguez, jordana brewster, tyrese gibson, chris \"ludacris\" bridges, elsa pataky , lucas black. joined international action stars new franchise including jason statham, djimon hounsou, tony jaa, ronda rousey , kurt russell.",       "title": "furious 7",       "year": 2015     },     {       "abridged_cast": [         {           "characters": [             "oh"           ],           "id": "770702500",           "name": "jim parsons"         },         {           "characters": [             "tip"           ],           "id": "351524959",           "name": "rihanna"         },         {           "characters": [             "captain smek"           ],           "id": "162654836",           "name": "steve martin"         },         {           "id": "162652167",           "name": "jennifer lopez"         }       ],       "alternate_ids": {         "imdb": "2224026"       },       "critics_consensus": "",       "id": "771315639",       "links": {         "alternate": "http://www.rottentomatoes.com/m/home_2015/",         "cast": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639/cast.json",         "reviews": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639/reviews.json",         "self": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639.json",         "similar": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639/similar.json"       },       "mpaa_rating": "pg",       "posters": {         "detailed": "http://resizing.flixster.com/lo7v_j1xutlsbwziycinbxbm5qe=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg",         "original": "http://resizing.flixster.com/lo7v_j1xutlsbwziycinbxbm5qe=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg",         "profile": "http://resizing.flixster.com/lo7v_j1xutlsbwziycinbxbm5qe=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg",         "thumbnail": "http://resizing.flixster.com/lo7v_j1xutlsbwziycinbxbm5qe=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg"       },       "ratings": {         "audience_rating": "upright",         "audience_score": 69,         "critics_rating": "rotten",         "critics_score": 47       },       "release_dates": {         "theater": "2015-03-26"       },       "runtime": 93,       "synopsis": "when oh, loveable misfit planet, lands on earth , finds himself on run own people, forms unlikely friendship adventurous girl named tip on quest of own. through series of comic adventures tip, oh comes understand being different , making mistakes part of being human. , while changes planet , changes world, discover true meaning of word home. (c) fox",       "title": "home",       "year": 2015     }   ] } 

this reactjs code, intended data json file , bind in react components

var castmember=react.createclass({     render:function(){         <div classname="castmember">         </div>     } }); var cast=react.createclass({     render:function(){         var cast_members=this.props.cast.map(function (member){             return (                 <castmember member={member}/>             );         });         return (             <div classname="cast">                 {cast_members}             </div>         );     } }); var movie=react.createclass({     render:function(){         return (             <div classname="moviebox">                 <cast cast={this.props.movie.abridged_cast}/>             </div>         );     } }); var movielist=react.createclass({     render:function(){         var movienodes=this.props.movies.map(function (movie){             return (                 <movie movie={movie}/>             );         });         return (             <div classname="movielist">                 {movienodes}             </div>         );     } }); var datablock = react.createclass({         getinitialstate:function() {             return {data:{                 movies:[                     {abridged_cast:[]}                 ]             }}         },         componentdidmount:function() {             var a=this;             $.ajax({                 url:this.props.url,                 datatype:'json',                 cache:false,                 success:function(data){                     this.setstate({data:data})                 }.bind(this)             });         },         render: function() {             return (                 <div classname="datablock">                     <h1>movie list</h1>                     <movielist movies={this.state.data.movies}/>                 </div> ); } }); react.render(     <datablock url="data.json"/>,     document.getelementbyid('content') ); 

i have been doing demo in bottom-to-top order. able list of movies json file , render it, stuck in getting abridged_cast in each movie

in render function of cast component, if replace rendering {this.props.cast}, show up. fail in mapping them member property of castmember component: code above didn't display anything. what's wrong code?

var castmember=react.createclass({     render:function(){         <div classname="castmember">         </div>     } }); 

castmember component should handle prop, pass data member castmember-> <castmember member={member}/>.

this help:

var castmember=react.createclass({         render:function(){             return (                <div classname="castmember">                  {this.props.member}                </div>             );         }     });