Confused over use of cloneElement in useModalOverlay hook

[aktiga-inc]

I've been looking at the docs for the useModalOverlay hook, and I'm really confused over the use of cloneElement displayed there. Well, the confusion isn't necessarily with the use of cloneElement but what is being passed to it.

The code is as follows:

function ModalTrigger({ label, children, ...props }) {
  let state = useOverlayTriggerState(props);
  let { triggerProps, overlayProps } = useOverlayTrigger(
    { type: 'dialog' },
    state
  );

  return (
    <>
      <Button {...triggerProps}>Open Dialog</Button>
      {state.isOpen &&
        (
          <Modal {...props} state={state}>
            {React.cloneElement(children(state.close), overlayProps)}
          </Modal>
        )}
    </>
  );
}

I'm not familiar with the use of children here. I was not aware that children could act as a function that could be passed arguments.

Would anyone be able to offer some clarification to this?

Thanks!

[snowystinger]

That's a pattern called Render Props https://legacy.reactjs.org/docs/render-props.html but in this instance, the prop just happens to be children. So we can call children, which will return a React Component, and then we can pass props to that newly created component. You can think of it a little like currying as well.

[aktiga-inc]

Thanks! Through researching that pattern I have a fairly firm grasp on what is happening there now.