Simple Ajax request, that loops over data in React.js

Question

New to react and not 100% on how I should approach this relatively simple problem. I'm currently looking to gather some images from Reddit, that push those images back to the 'pImage' state.

Then have those said images display within the 'content' div. Usually, I would just go about this with a for loop, but is there a special way I should be processing it with react?

componentDidMount: function() {
      var self = this;
      $.get(this.props.source, function(result) {
        var collection = result.data.children;
        if (this.isMounted()) {
          this.setState({
            //Should I put a for loop in here? Or something else?
            pImage: collection.data.thumbnail
          });
        }
      }.bind(this));
    }

Fiddle to show my current state: https://jsfiddle.net/69z2wepo/2327/

nilgun · Accepted Answer · 2015-02-13 16:25:18Z

12

Here is how you would do it with a map function in the render method:

var ImageCollect = React.createClass({
        getInitialState: function() {
          return {
            pImage: []
          };
        },

        componentDidMount: function() {
          var self = this;
          $.get(this.props.source, function(result) {
            var collection = result.data.children;
            if (this.isMounted()) {
              this.setState({
                pImage: collection
              });
            }
          }.bind(this));
        },

        render: function() {
          images = this.state.pImage || [];
          return (
            <div>
              Images: 
              {images.map(function(image){
                  return <img src={image.data.thumbnail}/>
              })}
            </div>
          );
        }
      });

    React.render(
    <ImageCollect source="https://www.reddit.com/r/pics/top/.json" />,
      document.getElementById('content')
    );

Here is working fiddle: http://jsfiddle.net/2ftzw6xd/

answered Feb 13, 2015 at 16:25

nilgun

10.6k4 gold badges48 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Starboy Over a year ago

Thanks so much @nilgun works great! Just to clarify is this the best way to go about this? Would putting the map function in the Ajax call be a better way to go about it? (Just curious)

nilgun Over a year ago

I am not sure how you think you would do it in the ajax call. You can loop over image data in the success callback to change the structure you keep in your state. In order to render multiple images you should hold them in array, and eventually you will have to loop over that array in the render method.

Starboy Over a year ago

No I completely understand that, I guess I'm getting a little confused because of this fiddle example here: jsfiddle.net/martinaglv/Bnhe8 If you look at that example the recursive function is applied while in the ajax call. But I'm not clear on how the data is then looped over to then create all the image data.

nilgun Over a year ago

In that example, in ajax success callback result.data is converted to pictures array via map function. It gets only following properties from the api id, link, images.low_resolution.url, caption.text and creates an array of pictures with these properties leaving out the rest. This makes sense if you are not going to use other properties as the api returns a plenty of properties which you wont need. Since reddit also returns a heavy object for each picture I would also recommend doing the same. I can provide an example for your case as well?

nilgun Over a year ago

here is a fiddle with a loop in the ajax callback: jsfiddle.net/2yq1dpLw. I should say that setState/render parts (the parts that you are calling setState({ pImage: pictures }) and reading exactly what you set from within render function) are more related to react, what we are doing here (looping through api data and creating a new data structure) is more like basic javascript and doesnt really have anything to do with react.

|

Collectives™ on Stack Overflow

Simple Ajax request, that loops over data in React.js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related