React error No duplicate props allowed

The text starts here~

Overview

"No duplicate props allowed" warning is caused when we pass the same property multiple times for the same component. To resolve the warning, make sure to pass this property only once. For example, if you pass the className attribute multiple times, concatenate them into a space-separated string.

The following example is used to show how to cause the warning.

 const App = () => {
  // ⛔️ JSX elements cannot have multiple attributes with the same name.ts(17001)
  // No duplicate props allowed eslintreact/jsx-no-duplicate-props
  return (
    <div>
      <Button text="Click" text="Submit" />
    </div>
  );
};

function Button({text}) {
  return <button onClick={() => console.log('button clicked')}>{text}</button>;
}
export default App;

The problem in the code snippet is that we are passing the text attribute twice for the Button component. This is not allowed because the second text attribute overrides the first.

Make sure that each property is only passed to the same component once.

 const App = () => {
  // 👇️ only pass text prop once
  return (
    <div>
      <Button text="Submit" />
    </div>
  );
};

function Button({text}) {
  return <button onClick={() => console.log('button clicked')}>{text}</button>;
}
export default App;

className

If you get an error trying to pass multiple className attributes, you must concatenate them into a string and pass the attribute only once.

 const App = () => {
  return (
    <div>
      <h2 className="my-class-1 my-class-2 my-class-3">Hello world</h2>
    </div>
  );
};

export default App;

Instead of passing multiple className properties, we are passing multiple space-separated classes in the string we set for the className property.

If you need to insert variables into a string property, use template literals.

 const App = () => {
  const class1 = 'bg-lime';
  const class2 = 'text-white';

  return (
    <div>
      <h2 className={`padding-3 ${class1} ${class2}`}>Hello world</h2>
    </div>
  );
};

export default App;

Note that template literals use backslashes ` `, not single quotes. The dollar sign braces ${} expressions in the grammar will be replaced with class1 and class2 the actual value of the variable.

Summarize

To fix this error, we want to make sure the same property is passed only once. If passing the className attribute multiple times, concatenate them into a space-separated string.