Why am I getting this warning `No duplicate props allowed react/jsx-no-duplicate-props`

You probably passed the same prop twice to a Component. e.g.

<MyComponent someProp={'a'} someProp={'b'} />

I also go this error, I was rendering a component and passed 'className' twice. My solution was found here with How to apply multiple classnames to an element. I then just concated the names together, the error went away and my UI rendered perfectly.

//Error

<IconButton
  color="secondary"
  className={classes.button}
  className={classes.test}
  component="span"
  classes={{
    root: classes.checkRoot,
  }}
>

//Solution

<IconButton
 color="secondary"
 className={[classes.button, classes.test ]}
 component="span"
 classes={{
    root: classes.checkRoot,
 }}
>

Why am I getting this warning `No duplicate props allowed react/jsx-no-duplicate-props`

Related

Recent Posts