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

Question

Why am I getting this warning?

warning No duplicate props allowed react/jsx-no-duplicate-props#

It\'s showing line number 28 but t

Answer 1

It can be as simple as duplicate id on HTML:

<input id="txt-id" id="txtID" />

Answer 2

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

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

Answer 3

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,
 }}
>

Answer 4

The warning come when any duplicate attribute is used on same tag i.e.

    <input id="a" id="b" />
    <MyComponent someProp={'a'} someProp={'b'} />
    <input placehoder="a" placeholder="a" />
    <div className='a' className='b'></div>