Ripple effect is lost when inside another Component

Question

Ripple effect seems to be lost when I put a BaseComponent with a ripple effect inside a custom one.

I'm creating a generic Component in react that looks like this:

const ToggleButton = ({ selected, items, onChange, ...props }) => {
const classes = useStyles();
const tabsStyles = appleTabsStylesHook.useTabs();
const tabItemStyles = appleTabsStylesHook.useTabItem();

const handleChangeData = (event, data) => {
    onChange(data);
};

return (
    <Fragment>
        {items && (
            <Tabs
                className={classes.root}
                classes={tabsStyles}
                value={selected}
                onChange={handleChangeData}
                indicatorColor='primary'
                textColor='primary'
                centered
            >
                {items.map(({ label, value }) => (
                    <Tab
                        classes={tabItemStyles}
                        key={`toggle-${value}`}
                        value={value}
                        label={label}
                    />
                ))}
            </Tabs>
        )}
    </Fragment>
  );
};

When I call it directly from any Component, it looks like this:

This is the return statement I used to call the ToggleButton:

return (
    <ToggleButton
        {...props}
        onChange={handleChangeData}
        selected={searchMode}
        items={[
            {
                label: t('common.search.basic'),
                value: 'basic',
            },
            {
                label: t('common.search.advanced'),
                value: 'advanced',
            },
        ]}
    />
);

Then I tried to insert it in another Component I created like this:

The return statement:

return <TestContent />;

The new Component:

const TestContent = () => {
    return (
        <ToggleButton
            onChange={handleChangeData}
            selected={searchMode}
            items={[
                {
                    label: t('common.search.basic'),
                    value: 'basic',
                },
                {
                    label: t('common.search.advanced'),
                    value: 'advanced',
                },
            ]}
        />
    );
};

So I just encapsulated the ToggleButton with a new Component I just created. But then the tab effect is lost as seen here:

Why is this effect being lost if I encapsulate it in a custom Component? How can I fix that?

Answer 1

Since Tab is a composed component, the library internally will be adding additional props to the children which are meant to reach the Tab component. Now that you have an additional component wrapper over it, it is passed on to that wrapper and since you do not forward these props, it doesn't reach the Tab component causing the animation effect to not work properly

You can just forward the props to solve this

const TestContent = (props) => {
    return (
        <ToggleButton
            {...props}
            onChange={handleChangeData}
            selected={searchMode}
            items={[
                {
                    label: t('common.search.basic'),
                    value: 'basic',
                },
                {
                    label: t('common.search.advanced'),
                    value: 'advanced',
                },
            ]}
        />
    );
};