CODEWITHSUNDEEP
javascriptarraysreactjsreact-native
Emilis
Emilis

Reputation: 162

Javascript destructuring data in react

I am using react-native and I am trying to pass data to child component, and after that I want to use map method for displaying user data with key value. Data converted to array So i get this data after making array from object, how should i destruct it to get username etc.. PARENT COMPONENT:

render() {
    let userMap = Object.entries(this.state.users).map(key => key);

    return (
      <ViewPager
        users={userMap}
        usersRetrieved={this.state.usersRetrieved}
        addNewMatch={this.addNewMatch}
        navigation={this.props.navigation}
      />
    );

CHILD COMPONENT:

<Text>{JSON.stringify(props.users)}</Text>

How should i get username or profile_picture data? I tried to do props.users[0].username but no luck

DATA EXAMPLE WITH 3 USERS:

{
  "lwcIQTcpAae4e38hrD2K5Ar76W93": {
    "email": "[email protected]",
    "fbid": "3008*******71455",
    "gender": "male",
    "profile_picture": "...",
    "username": "Emilis"
  },
  "tempuser": {
    "email": "[email protected]",
    "fbid": 315151515,
    "gender": "female",
    "matches": {
      "lwcIQTcpAae4e38hrD2K5Ar76W93": [Object]
    },
    "profile_picture": "...",
    "username": "Egle"
  },
  "thirdUserID":{
    "email": "[email protected]"
    "username": "thirdUserUsername"
    ...
   }

}

Upvotes: 0

Views: 681

Answers (5)

palaѕн
palaѕн

Reputation: 73906

You can update userMap variable in parent component like

let userMap = Object.entries(this.state.users).map(([key, value]) => value);

This returns an array of user objects like:

[{
    "email": "[email protected]",
    "fbid": "3008*******71455",
    "gender": "male",
    "profile_picture": "...",
    "username": "Emilis"
  },
  {
    "email": "[email protected]",
    "fbid": 315151515,
    "gender": "female",
    "matches": {
      "lwcIQTcpAae4e38hrD2K5Ar76W93": [Object]
    },
    "profile_picture": "...",
    "username": "Egle"
  },
  {
    "email": "[email protected]"
    "username": "thirdUserUsername"
      ...
  }
]

Then in child component you can simply .map() over all users like:

{props.users.map(user => (
  <Text>{user.username}</Text>
))}

Edit:

As, you need the userid also, then update userMap variable in parent component like:

let userMap = Object.entries(this.state.users);

Then in the child component, update map like:

{props.users.map(([key, user]) => (
  <Text>{key}</Text>
  <Text>{user.username}</Text>
))}

Or,

{props.users.map(([key, user]) => (
  <Text>{key + ', ' + user.username}</Text>
))}

Upvotes: 1

hong developer
hong developer

Reputation: 13916

Array appears to be tied up several times.

The value you want is in the second index of the second array.

{props.users.map(user => (
  <Text>{user[1].username}</Text>
))}

Upvotes: 0

lucas galliot
lucas galliot

Reputation: 49

What are you trying to do with Object.entries(this.state.users).map(key => key); ? Object.entries already returns an array so there's no need to map it afterwards like that I reckon.

Anyway, to destructure an object in js:

const obj = {
  a: "value",
  b: "other value",
}
const {a,b} = obj
// a "value", b "other value"

Note that the variable and the key should be named the same. And now you have a and b as constants available in your code.

In your child component you could have smth like this:

render() {
    let users = props.users

    return users.map(user => {
        const {username, email} = user; // destructure whatever you want
        return <Text>{email} {username}</Text> // display it the wy you want
    });
}

Upvotes: 0

Marco Caldera
Marco Caldera

Reputation: 505

You can do the following thing:

{props.users.map(user => (
  <Text>{user[0].username}</Text>
))}

Upvotes: 0

Nick Vanden Eynde
Nick Vanden Eynde

Reputation: 21

Have you tried doing props.users[0][1].username instead? Since it seems to be the second value of an array inside an array

Upvotes: 2

Related Questions