Trouble getting data from JSON with ReactJS

Question

I have a JSON file like 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 the global exploits in the unstoppable franchise built on speed, Vin Diesel, Paul Walker and Dwayne Johnson lead the returning cast of Fast & Furious 7. James Wan directs this chapter of the hugely successful series that also welcomes back favorites Michelle Rodriguez, Jordana Brewster, Tyrese Gibson, Chris \"Ludacris\" Bridges, Elsa Pataky and Lucas Black. They are joined by international action stars new to the franchise including Jason Statham, Djimon Hounsou, Tony Jaa, Ronda Rousey and 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, a loveable misfit from another planet, lands on Earth and finds himself on the run from his own people, he forms an unlikely friendship with an adventurous girl named Tip who is on a quest of her own. Through a series of comic adventures with Tip, Oh comes to understand that being different and making mistakes is all part of being human. And while he changes her planet and she changes his world, they discover the true meaning of the word HOME. (c) Fox",
      "title": "Home",
      "year": 2015
    }
  ]
}

This is my ReactJS code, intended to get data from that JSON file and bind in my 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 this demo in bottom-to-top order. I was able to get list of movies from JSON file and render it, but now stuck in getting abridged_cast in each movie

In render function of Cast component, if I replace it with rendering {this.props.cast}, everything will show up. But I fail in mapping them to member property of CastMember component: My code above didn't display anything. What's wrong with my code?

Answer 1

var CastMember=React.createClass({
    render:function(){
        <div className="castmember">
        </div>
    }
});

CastMember component should handle its prop, as you pass the data member to CastMember-> <CastMember member={member}/>.

This would be help:

var CastMember=React.createClass({
        render:function(){
            return (
               <div className="castmember">
                 {this.props.member}
               </div>
            );
        }
    });