Conditional Rendering Ownership

Move conditional rendering controlled by a component-specific hasX prop into that component. Parent and intermediate components must render the child unconditionally and forward props unchanged; the controlled component must consume hasX and return null when it is false. Keep a condition in a parent only when it controls broader composition, layout, or coordination among multiple children.

Correct

export default props => <Items {...props} />
export default props => {
    if (!props.hasItems) return null
    return <ul />
}
export default props => <main>
    {
        props.hasDashboard && <>
            <Chart {...props} />
            <Legend {...props} />
        </>
    }
</main>

Incorrect

export default props => <main>
    {
        props.hasItems && <Items {...props} />
    }
</main>

Fix

Move the hasX guard into the controlled child. Conditions coordinating multiple children remain in the parent. Review ambiguous single-child layout guards manually.