I’m having a problem getting children of children. I need to get the first div element inside another first div but the 2nd Children.toArray(..)[0] doesn’t work, it gets the same outer div. I suspect it could be because children is on components but not for divs.

This renders the entire inner div with the divs for “results” and “filters”. How can I get each of the nested inner divs so I can do something like this:

Children.forEach(navElements, child => navLinks.push(<a href="#" someSetStateFunction={..}>{child}</a>));

I’m new to React and haven’t been able to find much on using the component children property.

function renderNavigation() {
    const navElements = Children.toArray(children)[0];
    return Children.toArray(navElements)[0];;
}

<Sidebar>
  <ViewSwitch>
    <div style={{backgroundColor: "blue", color: "white"}}>
      <div>results</div>
      <div>filters</div>
    </div>
    <div>
      <ResultList></ResultList>
      <Filters></Filters>
    </div>
  </ViewSwitch>