Access child element in nested query

🆘 Support
1

Hello Roger / Support,

I hope you’re well!

I’ve been working away in Dato CMS the last few Weeks and its awesome but I’ve just hit a problem when building a Navigation component.

I’m using a switch statement to access the parent element which has its own ‘_modelApiKey’ which is ‘menu_dropdown’.

This is fine but how do I access the child element? The child element has a different ‘_modelApiKey’ which is ‘menu_item’.

I’ve tried creating a separate switch statement which would be nested in the same block but it doesn’t look right and starts to get a bit messy.

I’ve attached a screenshot which should make it a lot clearer than my explanation!

Thanks in advance,

Richard Gill

Query
Query961×714 174 KB

2

Hi @albioncircus , glad you’re liking DatoCMS!

Any time you see a child array, you have to map through it too. So it’d be something like this:

switch (parentItem._modelApiKey) {
  case "menu_dropdown":
    return (
      <li>
        <a href="example">{parentItem.title}</a>
        <ul>
          {parentItem.items.map((childNavItem) => (
            <li>{childNavItem.title}</li>
          ))}
        </ul>
      </li>
    );
}

You don’t actually need a switch() for the children beacuse they all have the same type, menu_item. The switch is used to differentiate between cases (it’s just a shorthand to save you the trouble of writing a bunch of if statements). What you need here is just a way to iterate through a child array again (using parentItem.items.map()).

Hope that helps!

3

Works perfectly! Thanks Roger

1 Like