React position fixed issue

January 25, 2023

So I have a component which is basically a custom button, with position: fixed, and I need it to render twice, one next to the other, but how can I achieve this if this component has position: fixed ? Basically, Is rendered twice in the same position.

Here is my code, where FloatingButton is the component with the issue above:

    return (
        <div className="details">
            <Grid container spacing={3}>
            <Grid item xs={12} md={12}>
                <Header {...headerProps} />
            </Grid>
            <Grid container className="inner-container" justifyContent="flex-end">
                
                    <Grid item>
                        {floatingButtonProps ? <FloatingButton {...floatingButtonProps} /> : null}
                    </Grid>
                    <Grid item>
                        {floatingButtonProps ? <FloatingButton {...floatingButtonProps} /> : null}
                    </Grid>
            </Grid>
        </Grid>
        </div>
    );

and here is the CSS from the Button component:

    min-width: 80px;
    max-width: 80px;
    height: 80px;
    border-radius: 40px;
    position: fixed;
    bottom: 32px;
    right: 32px;
    display: inline-flex;
    border-color: transparent;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: max-width 0.5s;

>Solution :

You can also pass the value for right in props to FloatingButton
like,

For first button <FloatingButton right='32px'/> and for second one <FloatingButton right='132px'/>
and in the Button component, you can assign it as CSS property