React composition issues

I’m having a few issue with React composition. For isntance:

const FormActions: React.FC<any> = () => {

    return (
        <Fab position="right-bottom" slot="fixed" color="pink">
            <Icon f7="question"></Icon>
            <FabButtons position="top">
                <FabButton label="Show Errors">
                    <Icon f7="rays"></Icon>
                </FabButton>
            </FabButtons>
        </Fab>
    );

}

<Page name="multiStepDomainFormPage">
       <FormActions />
</Page>

The FAB is placed in page content area.

But if I change it to this:

<Page name="multiStepDomainFormPage">
       <div slot="fixed"><FormActions /></div>
</Page>

The the FAB is inserted inside a div which is a direct child of “page” right before “page-content” which is correct.

This happens to other elements as well when using composition. If I extract ListItem to a composable component then I must manually wrap it with ul element.

Is there a explanation for this, and what are the best practices for React composition.

When you use custom component F7 can’t detect what is inside. It is by design, just use slots:

<Page name="multiStepDomainFormPage">
       <FormActions slot="fixed" />
</Page>

Thanks, that works.

Some components do not have slots.

const InputController: React.FC<any> = () => {
    return (
        <ListInput
            ...  />
    );
}

<List>
       <InputController  />
</List>

This render without ul element. Currently I am doing this to compensate:

<List>
       <ul>
                 <InputController  />
       </ul>
</List>

Would you do it similarly or is there another way?

List has slots https://framework7.io/react/list-view.html#list-slots