Create flat object from values in deeply nested object with ES6

Question

I'm creating and returning this object with properties that originates in a deeply nested object:

const mapStateToProps = (state) => ({
  firstName: state.currentUser.obj.firstName,
  lastName: state.currentUser.obj.lastName,
  email: state.currentUser.obj.email,
})

Another way of doing it is like this:

const mapStateToProps = (state) => {
  const {
    obj: {firstName, lastName, email},
  } = state.currentUser;

  return {
    firstName,
    lastName,
    email,
  };
}

I'm pretty happy with the first example, but it would be nice to finde a way to skip the repetition of state.currentUSer.obj for every line.

Is there any conciser way to accomplish the above than the given examples?

Input object:

const state = {
  currentUser: {
    isUpdatingAccount: false,
    isUpdatingFavouriteColor: false,
    obj: {
      firstName: null,
      lastName: null,
      email: null,
      favoriteColor: null,
      favoriteTeam: null,
    },
  },    
}

Use const {firstName, lastName, email} = state.currentUser.obj; — Hassan Imam
– Hassan Imam, Commented Jan 10, 2018 at 13:02
Are those three keys guaranteed to be the only ones that exist? — Alnitak
– Alnitak, Commented Jan 10, 2018 at 13:08

Ori Drori · Accepted Answer · 2018-01-10 13:02:51Z

You can use nested destructuring to get the properties you want:

const state = {
  currentUser: {
    isUpdatingAccount: false,
    isUpdatingFavouriteColor: false,
    obj: {
      firstName: null,
      lastName: null,
      email: null,
      favoriteColor: null,
      favoriteTeam: null,
    },
  },    
}

const mapStateToProps = ({ currentUser: { obj: { firstName, lastName, email }}}) => ({
  firstName,
  lastName,
  email
})

console.log(mapStateToProps(state))

You should also add defaults as fallback to prevent errors in case parts of the structure are missing:

const state = {
  currentUser: {
    isUpdatingAccount: false,
    isUpdatingFavouriteColor: false
    // I've removed obj as an example with default fallback
  },    
}

const mapStateToProps = ({ currentUser: { obj: { firstName, lastName, email } = {}} = {}}) => ({
  firstName,
  lastName,
  email
})

console.log(mapStateToProps(state))

Collectives™ on Stack Overflow

Create flat object from values in deeply nested object with ES6

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related