Stack shows dividers between null children

[githorse]

Steps to reproduce

Stackblitz example

Current behavior

When a child element returns null (conditionally), the Stack still treats this as a child and inserts a divider, even though there is no DOM element to divide:

Expected behavior

I would have expected that null children would not be treated as DOM elements and not produce any dividers.

Context

I have an action/navigation bar with several sections. Under some conditions, some of those sections don't make any sense, and so the components that render them return null in that case. I don't want the dividers to show up around invisible sections.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 22.6.0 - /opt/homebrew/bin/node
    npm: 10.8.2 - /opt/homebrew/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 129.0.6668.89
  npmPackages:
    @emotion/react:  11.13.3 
    @emotion/styled:  11.13.0 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.16.7 
    @mui/icons-material: ^5.15.12 => 5.16.7 
    @mui/lab:  5.0.0-alpha.173 
    @mui/material: ^5.15.12 => 5.16.7 
    @mui/private-theming:  5.16.6 
    @mui/styled-engine:  5.16.6 
    @mui/styles:  5.16.7 
    @mui/system:  5.16.7 
    @mui/types:  7.2.16 
    @mui/utils:  5.16.6 
    @mui/x-data-grid:  6.20.4 
    @mui/x-data-grid-premium:  6.20.4 
    @mui/x-data-grid-pro:  6.20.4 
    @mui/x-date-pickers:  5.0.20 
    @mui/x-date-pickers-pro:  5.0.20 
    @mui/x-license-pro:  6.10.2 
    @types/react: ^18.0.25 => 18.3.4 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: ^5.4.5 => 5.5.4 

Search keywords: stack divider child children null

[KirankumarAmbati]

packages/mui-system/src/Stack/createStack.tsx -> joinChildren function filters out falsy children sent to it as:

const childrenArray = React.Children.toArray(children).filter(Boolean);

A component that return null, is still a react component. Hence, it is not being evaluated to false.

[sai6855]

closing the issue based on #43969 (comment)

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@githorse How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.