Component “loop” with React JS

Question

I'am studying React JS library, and i wish create a "loop" of component, returning array values from json file. Here my json file:

{
  "data": {
    "children": [{
      "data": {
        "score": 4
      },
      {
        "data": {
          "score": 2
        }
      }
    }]
  }
}

My react component:

var ImagesList = React.createClass({
    render: function() {
      var imagesNodes = this.props.data.map(function (image){
        return (
          <div className="card">
              <p>{image.score} </p>
          </div>
        );
      });

      return (
        <div className="images">
          {imagesNodes}
        </div>
      );
    }
  });

var ImageBox = React.createClass({
    getInitialState: function(){
      return {
        data: {children:[]}
      };
    },

    getImages: function(){
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data){
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err){
          console.error(url, status, err.toString());
        }.bind(this)
      });
    },

  componentWillMount: function(){
      this.getImages();
  },

  render: function() {
    return (
      <div className="list-images">
          {<ImagesList data={this.state.data.children}/>}
      </div>
    );
  }
});

  React.render(
    <ImageBox url="myfile.json" />,
    document.getElementById('test')
  );

When I run the code, returning this error:

Uncaught TypeError: Cannot read property 'map' of undefined.

I dont know how to fix that.

Answer 1

JSON input data seems to be invalid. Validated it on JSONParser

ImageList component expects children JSON Array inside the data object. So if AJAX call returns following JSON, component would be able to render that data

{
  "children": [
    {
      "score": 4
    },
    {
      "score": 2
    }
  ]
};

Please note that this.setState({data: data}); is already having data variable. So the response should not again set data else it becomes data.data.children . That is why code is throwing Uncaught TypeError: Cannot read property 'map' of undefined.

For further reading after you complete ReactJS study, I would recommend to check Flux Architecture , which is recommended way of implementing ReactJS applications

Answer 2

Lets debug your code. in the ajax callback function at your code. you gets the json data returns and you set the state data with the return data. So this.state.data will be:

{
  "data": {
    "children": [{
      "data": {
        "score": 4
      },
      {
        "data": {
          "score": 2
        }
      }
    }]
  }
}

And in the render method you are trying to insert props to ImagesList from ImageBox as

data = { this.state.data.children }

but this.state.data.children is undefined. there is no key named children in this.state.data. You can do

 {<ImagesList data={this.state.data.data.children}/>}

NB. Dont forget to validate the JSON value as described in above comment and Parse it to Json.

 getImages: function(){
  $.ajax({
    url: this.props.url,
    dataType: 'json',
    success: function(data){
      this.setState({data: JSON.parse(data)});
    }.bind(this),
    error: function(xhr, status, err){
      console.error(url, status, err.toString());
    }.bind(this)
  });
},