React: looping over two different APIs doesn't seem to work.

Hi I have these mock APIs:

Comments: https://api.myjson.com/bins/17g1r

Posts: https://api.myjson.com/bins/2ec13

And I want to loop over Posts API and Comments API to get the number of comments each posts has based on the postId in the comments API in number. I tried to do this but it just returns a single object with data and others as nothing. Here is part of the Component:

  postComments(comments, posts) {
    for (var key in comments) {
      const obj = comments[key];
        return posts.map((post, i) => {
              return <PostDisplay
                      key={i}
                      {...post}
                      commentLength={ obj.postId === post.id ? obj : '' }
                    />;
        })
    }
  } 

The commentLength prop when console.logged returns this:

Object {id: 1, text: "Praesentium ut qui facere aliquid.", user: "keltonabshire", postId: 60297}
16

The Object is the only result it is passing and the 16 is the empty string I'm passing to commentLength on the PostDisplay component.

However I want to be able to render the PostDisplay component and also get the number of comments this particular post has using postId.

I have the PostDisplay working but the commentsLength is not all of the posts related to each component.

Thanks