# Conditional rendering of group field

**URL:** <https://community.prismic.io/t/conditional-rendering-of-group-field/974>\
**Category:** Developing with Prismic\
**Created:** [June 24, 2020, 5:18pm UTC](https://community.prismic.io/t/conditional-rendering-of-group-field/974 "2020-06-24T17:18:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![jesse](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jesse/32/2425_2.png) [@jesse](https://community.prismic.io/u/jesse)\
**Post date:** [June 24, 2020, 5:18pm UTC](https://community.prismic.io/t/conditional-rendering-of-group-field/974/1 "2020-06-24T17:18:00Z")

</div>

Hi everyone,

I've built out a navigation model according to this tutorial:

> **[Creating a 2 level Navigation Menu](https://community.prismic.io/t/creating-a-2-level-navigation-menu/5466)**
>
> You can configure a dedicated custom type for editors to manage a navigation menu easily: add navigation items, order links, and manage link labels. Here is an example of a configuration for a 2-level navigation using Slices. It takes advantage of...

I want to give my content editors the ability to create top level links that have sub links in a dropdown, but also to create top level links that do not. What I'm needing to do is only render my dropdown if there are fields present under the top link. Is that possible, and how could I go about it?

Jesse

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [June 25, 2020, 12:20pm UTC](https://community.prismic.io/t/conditional-rendering-of-group-field/974/3 "2020-06-25T12:20:37Z")

</div>

Hey Jesse,

This would be done with an if statement at the project level. What technology are you building your app in? Do you have anything implemented so far?

Thanks.

---

<div class="post-metadata">

**Author:** ![jesse](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jesse/32/2425_2.png) [@jesse](https://community.prismic.io/u/jesse)\
**Post date:** [June 25, 2020, 1:58pm UTC](https://community.prismic.io/t/conditional-rendering-of-group-field/974/4 "2020-06-25T13:58:37Z")

</div>

So sorry, I’m building it in Gatsby! At this point all I have implemented is logic to keep the site from breaking if there are no subfields. Here’s what I’ve got:

```
{slice.fields.map((secondaryNav, index) => {
  if (!slice.fields) {
    return null;
  }
  <!-- markup is rendered here -->
 }

```

This looks over my slices and as long as the navigation item has sub fields it renders the content.

---

<div class="post-metadata">

**Author:** ![jesse](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jesse/32/2425_2.png) [@jesse](https://community.prismic.io/u/jesse)\
**Post date:** [July 2, 2020, 5:53pm UTC](https://community.prismic.io/t/conditional-rendering-of-group-field/974/5 "2020-07-02T17:53:58Z")

</div>

Hi there everyone! Any thoughts on this?

Thanks!

---

<div class="post-metadata">

**Author:** ![jean.helou](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jean.helou/32/527_2.png) [@jean.helou](https://community.prismic.io/u/jean.helou)\
**Post date:** [July 3, 2020, 1:51pm UTC](https://community.prismic.io/t/conditional-rendering-of-group-field/974/7 "2020-07-03T13:51:17Z")

</div>

Shouldn’t that be

```auto
{
  if (!slice.fields) {
    return null;
  } else {
    return slice.fields.map((secondaryNav, index) => {
    <!-- markup is rendered here -->
    })
  }
}

```

I have also followed the tutorial and to make rendering the markup easier I preprocess the result of the navigation to create a nested structure

```auto
const items = content.body.reduce((acc, el) => {
    if (acc.length === 0) {
      return [el];
    }
    const current = acc.pop();
    if (current.slice_type === el.slice_type) {
      acc.push(current);
      acc.push(el);
    } else {
      acc.push({ ...current, items: [...current.items, el] });
    }
    return acc;
  }, []);

```

this way I go from a flat list of navigation items which declare a nesting level to a nested list of lists of navigation items

so

```auto
[ 
  {level_1, ...item1},
  {level_2, ...item1},
  {level_2, ...item2}, 
  {level_1, ...item2},
  {level_2, ...item1},
  {level_2, ...item2},...
]

```

becomes

```auto
{
  {
    level_1, 
    items:[
     {level_2, ...item1},
     {level_2, ...item2}, 
    ],
    ...item1
  },
  {
    level_1, 
    items:[
      {level_2, ...item1},
      {level_2, ...item2}, 
    ],
     ...item2
  }, 
   ...
]

```

---

<div class="post-metadata">

**Author:** ![jesse](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jesse/32/2425_2.png) [@jesse](https://community.prismic.io/u/jesse)\
**Post date:** [July 8, 2020, 10:07pm UTC](https://community.prismic.io/t/conditional-rendering-of-group-field/974/8 "2020-07-08T22:07:53Z")

</div>

> [@jean.helou](#):
>
> ```auto
> const items = content.body.reduce((acc, el) => {
> if (acc.length === 0) {
> return [el];
> }
> const current = acc.pop();
> if (current.slice_type === el.slice_type) {
> acc.push(current);
> acc.push(el);
> } else {
> acc.push({ ...current, items: [...current.items, el] });
> }
> return acc;
> }, []);
> 
> ```

Thank you! For the first point, that doesn't work; it doesn't render the dropdown for any of the slices using that.

Secondly, can you show me how you're including this code to render the nested lists?

---

<div class="post-metadata">

**Author:** ![jean.helou](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jean.helou/32/527_2.png) [@jean.helou](https://community.prismic.io/u/jean.helou)\
**Post date:** [July 9, 2020, 4:31pm UTC](https://community.prismic.io/t/conditional-rendering-of-group-field/974/9 "2020-07-09T16:31:10Z")

</div>

> [@jesse](#):
>
> Secondly, can you show me how you’re including this code to render the nested lists?

Our code is a bit more involved and the actual rendering to html will depend quite strongly on the templating framework. in react it looks like this;

```auto
const Nav = ({ items }) => (
  <ul>
    {items.map(item => (
      <li>
        {item.text}
        {item.items ? <Nav items={item.items} /> : null}
      </li>
    ))}
  </ul>
);

const Header = ({ content }) => {
  const items = content.body.reduce((acc, el) => {
    if (acc.length === 0) {
      return [el];
    }
    const current = acc.pop();
    if (current.slice_type === el.slice_type || el.slice_type === 'action') {
      acc.push(current);
      acc.push(el);
    } else {
      acc.push({ ...current, items: [...current.items, el] });
    }
    return acc;
  }, []);
  return (
    <nav>
      <Nav items={items} />
    </nav>
  );
};

```

where content has been bound to the `data` field of the payload you receive from prismic...

---

<div class="post-metadata">

**Author:** ![jesse](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jesse/32/2425_2.png) [@jesse](https://community.prismic.io/u/jesse)\
**Post date:** [July 13, 2020, 6:30pm UTC](https://community.prismic.io/t/conditional-rendering-of-group-field/974/10 "2020-07-13T18:30:51Z")

</div>

I ended up figuring this out, borrowing some code from [here](https://github.com/imranhsayed/gatsby-wordpress-themes). Here’s the full code for my `MainNav` component:

```
export const MainNav = ({ menuItems }: MenuProps) => {
  const navItems = menuItems.main_nav
    ? menuItems.main_nav.map((slice: any, index: any) => {
        const hasDropdown = null !== slice.fields ? slice.fields.length: false;
        if (slice.type === 'nav_item') {
          if (slice.primary.link._linkType === 'Link.document') {
            return (
              <li
              className={s.navigation__item}
              >
                <Link
                  to={linkResolver(slice.primary.link._meta)}
                  className={s.navigation__link}
                  activeClassName={s.navigation __link__ active}
                >
                  {RichText.asText(slice.primary.label)}
                </Link>
                { hasDropdown ? (
											<Dropdown slice={slice}></Dropdown>
										) : null }
              </li>
            );
          } else if (slice.primary.link._linkType === 'Link.web') {
            return (
              <li className={s.navigation__item} key={`${index}`}>
                <a href={slice.primary.link.url} target="_blank" className={s.navigation__link}>
                  {RichText.asText(slice.primary.label)}
                </a>
              </li>
            );
          } else {
            return null;
          }
        }
        return null;
      })
    : null;

  return <ul className={s.navigation__menu}>{navItems}</ul>;
};

```

In here I’m creating a `const` called `hasDropdown` that looks through the slice to see if it has any fields:

`const hasDropdown = null !== slice.fields ? slice.fields.length: false;`

Then when I’m rendering the nav item, I add this conditional:

```
{ hasDropdown ? (
    <Dropdown slice={slice}></Dropdown>
) : null }

```

Using this it’s only rendering the `Dropdown` component for links that have child items.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [September 15, 2020, 4:45pm UTC](https://community.prismic.io/t/conditional-rendering-of-group-field/974/11 "2020-09-15T16:45:26Z")

</div>



---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 12:11pm UTC](https://community.prismic.io/t/conditional-rendering-of-group-field/974/12 "2021-12-09T12:11:31Z")

</div>