react js is not returning the list of items

Question

Can someone please help me with this

  getFriendList () {

        let friends = null;

        FB.api('/me/taggable_friends',{
            fields: 'id,name,picture',
            limit: 10,
            access_token: this.state.fbResponse.authResponse.accessToken
        }, (response) => {
            friends = response.data.map(friend => {
                return(
                    <Friend key={friend.id} />
                );
            });
        }); 

        return friends;
  };

It is not returning the friends list. Always returns null. please help.

I'm getting 10 data. When I do console.log, It is printing.

Thanks in advance...

stackoverflow.com/questions/6847697/…

pawel
– pawel

2017-11-07 08:45:40 +00:00
Commented Nov 7, 2017 at 8:45 — pawel
– pawel, Commented Nov 7, 2017 at 8:45

rrd · Accepted Answer · 2017-11-07 09:02:57Z

4

FB.api is asynchronous and this is why you are getting null as result.

Can't you save friends in your state?

getFriendList () {
  FB.api('/me/taggable_friends',{
    fields: 'id,name,picture',
    limit: 10,
    access_token: this.state.fbResponse.authResponse.accessToken
  }, (response) => this.setState({ friends }))
}

I guess you are calling this method on componentDidMount:

componentDidMount() {
  this.getFriendsList()
}

and later render friends list upon completion:

render() {
  return(
    <div>
      {this.state.friends && this.state.friends.map(friend =>
        <Friend key={friend.id} />
      )}
    </div>
  )
}

edited Nov 7, 2017 at 9:02

rrd

5,9873 gold badges32 silver badges37 bronze badges

answered Nov 7, 2017 at 8:39

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

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

2 Comments

Govind Raj Over a year ago

Thanks for your response. Previously I'm using this function in render function. So I cannot use setState. Now I changed with DidMount & working.

Hemerson Carlin Over a year ago

componentDidMount is the recommended place to fetch data from remote api as well described in ReactJS docs. Calling it on render is not a good practice though.

Collectives™ on Stack Overflow

react js is not returning the list of items

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related