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.

[githorse]

@sai6855 should this be closed? I get that this is the current behavior, but isn't that strictly less useful than filtering out the nulls? With the current behavior, I just can't use the Stack divider prop when any child might be null. It's hard for me to see a use case where that's what I want:

Seems like that line might be better written as something like:

const childrenArray = React.Children.toArray(children).filter(
  child => child && isValidElement(child) && child.type() !=== null
);

(Untested; suggestion from this SO issue).

But I may be missing something -- maybe somebody has a good use case for the current behavior.