React.Children does not detect when child(ren) is null - reactjs

Question

I have read the various related issues on this subject, but none of them provide me with a solution.
my child is defined as follows
const RevocationHandler = ({ onClose = noop }) => {
const revocation = useRevocationContext();
const [isOpen, toggleOpen] = useState(false);
if (revocation.onRevoke == null) {
console.log('I am null');
return null;
}
function handleButtonClick (evt: React.MouseEvent): void {
evt.stopPropagation();
toggleOpen(true);
}
function handleClose () {
toggleOpen(false);
onClose();
}
if (!isOpen) {
return (
<button
onClick={handleButtonClick}
>
Revoke
</button>
);
} else {
return (
<Modal onClose={handleClose} useTransparency={true}>
<RevocationForm onCancel={handleClose} />
</Modal>
);
}
};
Please note that it's using Context to retrieve a callback function, and if that function is undefined, it should return null.
The parent is defined as such:
<ActionMenu>
<RevocationHandler />
</ActionMenu>
I would like the ActionMenu not to render if all (in this case only 1) children are null.
I have tried various variations of the following code:
React.Children
.toArray(children)
.filter((child) => React.isValidElement(child))
.length
With count, with filter, with map, whatever I try, at this moment of the execution React tells me I have 1 child. Yet, when things run, I do get the I am null console log:
As well as nothing rendered:
My question is, how do I properly detect that my Child will be null in this case?

Answer 1

At the first place what do you mean saying I would like the ActionMenu not to render ? If ActionMenu consists only of children and every child is null then nothing will be rendered anyway...
At second place that is the main ideology of react - all data goes from parents to children, so yopu can not rely on anything which children will render, then everything is upsidedown - children should depend on parent information...
So the approach is basically wrong i guess.

Answer 2

So, I have gone with the "React" way. It breaks encapsulation as it leaks concerns where it shouldn't, and eventually I still read the Children.count option (which is provided by React). And now it works. Less cleanly.
inAnotherFileThatShouldNotNeedToKnow.ts:
<ActionMenu>
{canRevoke && <RevocationHandler />}
</ActionMenu>
ActionMenu.ts:
if (React.Children.count(children) === 0) {
return null;
}
It's a pity that there is no better way to know that a child will return null, when things like React.Children.toArray does filter null children for you, but I can move on with my life as it serves my purpose: the ActionMenu is smart enough to not render when it has nothing to render.
Don't just believe in React dogma, people.

Answer 3

Ideally, data should flow from parent to child. You can move context checks to the parent component such that you have control over whether to render the children or not.
The child component will take care of its core functionality (like to show a modal on click of a button) and the parent component will decide based on checks when to render the child components.
const RevocationHandler = ({ onClose = noop }) => {
const [isOpen, toggleOpen] = useState(false);
function handleButtonClick (evt: React.MouseEvent): void {
evt.stopPropagation();
toggleOpen(true);
}
function handleClose () {
toggleOpen(false);
onClose();
}
if (!isOpen) {
return (
<button
onClick={handleButtonClick}
>
Revoke
</button>
);
} else {
return (
<Modal onClose={handleClose} useTransparency={true}>
<RevocationForm onCancel={handleClose} />
</Modal>
);
}
};
const ActionMenu = ({children}) => {
// you can add a check here if children should be rendered
const revocation = useRevocationContext();
if (revocation.onRevoke == null) {
console.log('I am null');
return null;
}
return (
<div>
....
{children}
</div>
);
};