Combining multiple const = in an array?

Question

How can I combine in an array the data from const = menuGallery, menuCompany and menuTour to all be called within menuData (see code below) so that my li should display the graphQl data from all three in const = menuData

render() {
  const menuGallery = get(this.props, 'data.allContentfulImageGallery.edges')
  const menuCompany = get(this.props, 'data.allContentfulCompanyPage.edges')
  const menuTour = get(this.props, 'data.allContentfulTourPage.edges')
  const menuData = [{menuGallery},{menuCompany},{menuTour}]

  return(
    {menuData.map(({ node: page })=> (
      <li className={slug === page.slug ? "selected" : ""} key={page.id}><a href={`/${page.slug}`}>{page.title}</a></li>
  ))}

if I change the current const menuData to be const menuData = menuGallery it will show the data from the allContentfulImageGallery but when combining multiples they don't map the data.

the graphQl query

export const menuQuery = graphql`
query menuQuery($slug: String!) {
    allContentfulCompanyPage(sort: {fields: [menuOrder], order: ASC}) {
      edges {
        node {
          id
          title
          slug
        }
      }
    }
    allContentfulTourPage(sort: {fields: [menuOrder], order: ASC}) {
      edges {
        node {
          id
          title
          slug
        }
      }
    }
    allContentfulImageGallery(sort: {fields: [menuOrder], order: ASC}) {
      edges {
        node {
          id
          title
          slug
        }
      }
    }
  }
`

Each works and is mapped individually but I have multiple content types that make up the App pages and want to list them together.

GG. · Accepted Answer · 2018-03-29 05:06:31Z

5

Sounds like you want to use the spread operator to combine three arrays into a single long one.

const menuData = [...menuGallery, ...menuCompany, ...menuTour]

edited Mar 29, 2018 at 5:06

GG.

22k14 gold badges93 silver badges133 bronze badges

answered Mar 29, 2018 at 4:56

Alexander Nied

13.8k4 gold badges30 silver badges50 bronze badges

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

2 Comments

Darren Over a year ago

Stellar! Thanks - are you able to help me understand what purpose the ... have? I'll accept this as the answer once it allows.

Alexander Nied Over a year ago

Glad to help! Spread is a great ES6 feature for both arrays and objects-- just remember, that it is doing shallow-copies, so it can't be used as a deep-cloning utility. Happy coding!

Collectives™ on Stack Overflow

Combining multiple const = in an array?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related