Middleware-like (chain of responsibility) rendering of React components - reactjs

Question

I have a ParentComponent with mildly complex state and logic (mostly to make UI much easier), it can be described as a some sort of form.
Now, after user has entered all the inputs, he needs to press a button.
Button and its action depend on the current state:
If user hasn't logged in, button suggests user to do so.
If they "used account from another platform", button asks him to change the account.
If account has no permissions to perform "main" action, button advises to request required permission.
And so on...
Naturally, I could dump all this logic and validation into ParentComponent and be done with it (and also with maintainability and readability). But I'd like to factor out each step described above into its own component (that may use local hooks and some global state from Redux) since calling hooks conditionally is frowned upon and hooks I need in one component conflict with hooks from another.
So I'm faced with the following problem:
I have multiple child components, each of which returns
button, if user needs to do something.
null, otherwise (user meets condition, so everything is fine).
I want to render said components one-by-one in predefined order.
If child component renders to something, show it.
If component renders to null, I want to render the next child.
This resembles chain of responsibility which is exactly what I'd like to do, but I don't understand how this approach maps to React components and rendering.

Answer 1

I've managed to come up with the implementation that allows to do the following:
<ChainOfResponsibility>
<EnsureUserHasLoggedIn>
<EnsureBalanceIsLoaded>
<BuyItemButton>
</ChainOfResponsibility>
If <EnsureUserHasLoggedIn> figured that user needs to sign in, it will render only the "sign in" button and nothing else. Otherwise, it will render the next "piece" in chain.
interface Props extends ChainOfResponsibilityPiece {}
const EnsureUserHasLoggedIn: React.FC<Props> = ({ next }) => {
const userHasLoggedIn = /* Arbitrary condition. */ true
if (!userHasLoggedIn) {
return <Button>Sign In</Button>
}
// Render the next piece in chain.
return <>{next}</>
}
Nice thing about this approach is that rerender of previous children will trigger render of the parent component (ChainOfResponsibility). That, in turn, will render the whole chain again, ensuring all invariants from the beginning.
Here is the code if you need it:
import React from 'react'
export interface ChainOfResponsibilityPiece {
next?: React.ReactNode
}
interface ChainOfResponsibilityProps {
children: React.ReactNode
}
const ChainOfResponsibility: React.FC<ChainOfResponsibilityProps> = ({ children }) => {
// Safety.
const childrenArray = React.Children.toArray(children).filter((child) => React.isValidElement(child))
// No children -> nothing to render.
if (childrenArray.length === 0) {
return null
}
// Build children with references to the next child.
const childrenWithNext = []
childrenArray.reverse().forEach((child, childIndex) => {
if (!React.isValidElement(child)) {
throw new Error(`Children must be valid React elements, got ${child}`)
}
childrenWithNext.push(
React.cloneElement(child, {
// SAFETY: We want either next child or `undefined` – out-of-bounds index returns `undefined`.
next: childrenWithNext[childIndex - 1], // Reversed index.
}),
)
})
// Render. Children are reversed, so start with the last one.
return <>{childrenWithNext[childrenWithNext.length - 1]}</>
}
export default ChainOfResponsibility