diff --git a/src/components/ui4/SectionView.tsx b/src/components/ui4/SectionView.tsx
index b2db9e7952d..6157ac5679e 100644
--- a/src/components/ui4/SectionView.tsx
+++ b/src/components/ui4/SectionView.tsx
@@ -5,7 +5,7 @@ import { fixSides, mapSides, sidesToMargin } from '../../util/sides'
import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
interface Props {
- children: React.ReactNode | React.ReactNode[]
+ children: React.ReactNode
// For scene-level usage where we want the line to extend all the way to the
// right
@@ -40,33 +40,17 @@ export const SectionView = (props: Props): JSX.Element | null => {
? styles.dividerMarginScene
: styles.dividerMarginCard
- const nonNullChildren = React.Children.map(children, child => {
- if (child != null) {
- return child
- }
+ // Add a line divider after each child:
+ const dividedChildren: React.ReactNode[] = []
+ React.Children.forEach(children, (child, i): void => {
+ if (child == null || child === false) return
+ dividedChildren.push(child)
+ dividedChildren.push()
})
- const numChildren = React.Children.count(nonNullChildren)
- if (children == null || numChildren === 0) return null
-
- // Add a line divider between each child if there's more than one:
- return (
-
- {numChildren === 1
- ? nonNullChildren
- : React.Children.map(nonNullChildren, (child, index) => {
- if (index < numChildren - 1) {
- return (
- <>
- {child}
-
- >
- )
- }
- return child
- })}
-
- )
+ // Render the children, skipping the last line divider:
+ if (dividedChildren.length === 0) return null
+ return {dividedChildren.slice(0, -1)}
}
const getStyles = cacheStyles((theme: Theme) => ({