accessing an object in an object in react native

Question

I'm pulling data from an API into an app. The API gives you data on lists of groups which I'm able to display to the user correctly and it works fine.

API CALL

componentDidMount() {  
    api.get('/groups?owner=true&groupMembers='+`${userID}`).then((response) => {
      let data = response.data.data.
      this.setState({userGroups: data , showLoader: false})
      console.log(JSON.stringify(this.state.userGroups))
    })
}

VIEW

    {
    userGroups.map((item, i) => {
    return (
    <List.Item
    key={i} 
    title= {item.name}
    title = {item.member.firstname} {item.member.lastname}
    description={item.description}
    left={props => <List.Icon {...props} icon="people" />}
  />
      );
    })
  }

API DATA

{
  "code": 2000,
  "message": "OK",
  "data": [
    {
      "id": 4,
      "groupType": "",
      "name": "Stars,
      "description": "Designed for stars",
      "avatar": "",
      "createdDate": "2019-02-08 15:13:49",
      "updatedDate": null,
      "owner": {
        "id": 2,
        "member": {
          "id": 3,
          "firstname": "Jack",
          "lastname": "Shaw",
          "othernames": "Eben",
          "createdDate": "2010-02-08 10:43:48"
        },
        "community": {
          "id": 3,
          "createdDate": "2019-02-06 09:59:21",
          "updatedDate": "2019-02-08 14:18:03",
          "communityType": "DEFAULT",
          "avatar": "string",
          "name": "Stars",
          "description": "Designed for stars"
        },
        "createdDate": "2019-02-08 11:06:44",
        "updatedDate": null,
        "admin": false
      },
      "closed": false,
      "opened": true,
      "default": true
    }
  ],
  "errors": null,
  "pager": {
    "page": 1,
    "pageSize": 10,
    "totalCount": 2,
    "direction": "DESC",
    "sortProperties": [
      "id"
    ]
  }
}

Now the challenge is I want to display the owner name in where I have in the view {item.member.name} but i'm finding it hard to do it. I want to be able to access the data in the member section of the array and bind it to the view

Re your attempt with `item.member.name`: The items in the array don't have a property called `member`. They have a property called `owner` which, in turn, has a property called `member`. But that `member` object doesn't have a `name` property, it has `firstname` and `lastname`. So `title = {item.owner.member.firstname + " " + item.owner.member.lastname}` would make sense (though I'd probably grab `member` to a local). — T.J. Crowder, Feb 11 '19 at 11:11
It's still the same basic problem. There is no `item.member`. There's an `item.owner.member`. — T.J. Crowder, Feb 11 '19 at 11:16
Since the items seem to have `id` properties, I'd use that instead of the array index for the `key` as well. Something like: https://pastebin.com/VEyAsWdJ — T.J. Crowder, Feb 11 '19 at 11:19

accessing an object in an object in react native

0 Answers0