Combining multiple const = in an array?

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.

Answer

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *