Concat objects in jsx of react with comma

Question

I have an user object like this

user: { name: "james", contact: "3245234545", email: "[email protected]" }

and I want to display it like this

james, 3245234545, [email protected]

if it's an array I can do join(',') but it's an object unfortunately. My current approach is like this

{this.user && <div> {this.user.name} ,{this.user.contact}, {this.user.email} </div> }

This will work but not perfect, what if user did not fill in their contact? then the extra , is still there. if the email is optional, then there will be an extra , too in the end.

elclanrs · Accepted Answer · 2017-05-07 16:01:25Z

You could use Object.keys:

{this.user && <div> {Object.keys(this.user).map(key => this.user[key]).join(', ')} </div> }

There is also Object.entries, but it not very well supported, so you'd have to use a polyfill for that.

Also note that the order of object keys may not be the exact order you defined them in, although most browsers will preserve the order, you may want to use a Map instead.

this won't work if the user object has other stuff like id, address, grade etc.
Well, that wasn't in the question... But you could use something like lodash _.pick(this.user, ['name', 'contact', 'email']) to pick the keys you want first.

Collectives™ on Stack Overflow

Concat objects in jsx of react with comma

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related