How can I solve this problem 'No duplicate props allowed react/jsx-no-duplicate-props'

user_13645646 0
Viewed 702

I am referring this post this post for finishing up a custom dialog. But I keep getting warning No duplicate props allowed react/jsx-no-duplicate-props

And the following code is the place holds props. How can I solve this problem ?

const DialogTitle = withStyles(styles)((props) => {
    const { children, classes, onClose, ...other } = props;
    return (
        <MuiDialogTitle disableTypography className={classes.root} {...other}>
            <Typography variant="h6">{children}</Typography>
            {onClose ? (
                <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
                    <CloseIcon />
                </IconButton>
            ) : null}
        </MuiDialogTitle>
    );
});
reactjs javascript
1 Answers

My guess is that other contains either className or disableTypography in it. Most probably it's className. So you should extract it and do something about it (let's say combine it with classes.root):

const { children, classes, onClose, className ...other } = props;
return (
    <MuiDialogTitle disableTypography className={`${classes.root} ${className}`} {...other}>
user_3325280
Related