Warning: React does not recognize the.... (disableFocusRipple, disableRipple, fullWidth, disableElevation)

[Diaver]

Hello!

I do receive a lot of warnings from React like:

index.js:1 Warning: React does not recognize the `disableElevation` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `disableelevation` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in button (created by ShareButton)
    in ShareButton (created by ForwardRef(ShareButton-reddit))
    in ForwardRef(ShareButton-reddit) (at MarkerCard.tsx:167)
    in div (created by ForwardRef(ButtonGroup))
    in ForwardRef(ButtonGroup) (created by WithStyles(ForwardRef(ButtonGroup)))
    in WithStyles(ForwardRef(ButtonGroup)) (at MarkerCard.tsx:151)
    in div (created by ForwardRef(CardContent))

Related to following props for all share buttons:

• disableFocusRipple
• disableRipple
• fullWidth
• disableElevation

React version: 16.13.1
react-share version: 4.1.0
material-ui version: 4.9.12

[Diaver]

UPD: The reason for this warnings was in parent component (ButtonGroup )which I was using and this parent component was passing refs down.

Closed

[kyr0]

@Diaver Sorry, how did you fix this? I'm in the same situation only using standard setup:

            <ButtonGroup ...>
                <IconButton ...>
                    <Icon>
                        <img  ... />
                    </Icon>
                </IconButton>
                <IconButton ...>
                    <Icon>
                        <img  ... />
                    </Icon>
                </IconButton>
            </ButtonGroup>

Should work out of the box, no? xD

[Diaver]

@kyr0
I do not remember the reason why it wasn't working, but this my final version of the code without ButtonGroup :

import React from 'react';
import {
    FacebookIcon,
    FacebookShareButton,
    RedditIcon,
    RedditShareButton,
    TelegramIcon,
    TelegramShareButton,
    TwitterIcon,
    TwitterShareButton, VKIcon, VKShareButton,
    WeiboIcon,
    WeiboShareButton, WhatsappIcon,
    WhatsappShareButton
} from "react-share";
import CardContent from "@material-ui/core/CardContent";
import {createStyles, makeStyles, Theme} from "@material-ui/core/styles";

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        socialButton: {
            marginRight: 8
        },
    }),
);

interface IMarkerCardShareButtonsProp {
    messageText: string

}

export function MarkerCardShareButtons(props: IMarkerCardShareButtonsProp) {

    const classes = useStyles();
    return (
        <CardContent>
            <FacebookShareButton
                className={classes.socialButton}
                url={window.location.href}
                quote={props.messageText}
            >
                <FacebookIcon
                    round={true}
                    size={32}
                />
            </FacebookShareButton>
            <TwitterShareButton url={window.location.href} className={classes.socialButton}>
                <TwitterIcon
                    round={true}
                    size={32}
                />
            </TwitterShareButton>
            <RedditShareButton url={window.location.href} className={classes.socialButton}>
                <RedditIcon
                    round={true}
                    size={32}
                />
            </RedditShareButton>
            <WeiboShareButton url={window.location.href} className={classes.socialButton}>
                <WeiboIcon
                    round={true}
                    size={32}
                />
            </WeiboShareButton>
            <TelegramShareButton url={window.location.href} className={classes.socialButton}>
                <TelegramIcon
                    round={true}
                    size={32}
                />
            </TelegramShareButton>
            <WhatsappShareButton url={window.location.href} className={classes.socialButton}>
                <WhatsappIcon
                    round={true}
                    size={32}
                />
            </WhatsappShareButton>
            <VKShareButton url={window.location.href} className={classes.socialButton}>
                <VKIcon
                    round={true}
                    size={32}
                />
            </VKShareButton>
        </CardContent>
    )
}