jsx-no-duplicate-props

Try in Playground
jsx-react

oscar143

UnknownInformational

0

No tags

No CWE or CVE

react/jsx-no-duplicate-props

Creating JSX elements with duplicate props can cause unexpected behavior in your application.

When Not To Use It

If you are not using JSX then you can disable this rule.

Ast Rule: html element


jsx-no-duplicate-props

How to write a rule
function getProp(attributes = [], prop = "") {
  if (!prop) return;

  return attributes.find((attribute) => {
    if (attribute && attribute.name && attribute.name.value) {
      return attribute.name.value === prop;
    }
  });
}

function getName(attribute = {}) {
  if (attribute.name) {
    return attribute.name.value;
  }
}

function visit(node, filename, code) {
	if (node && node.attributes && node.attributes.length) {
    const props = [];

    node.attributes.forEach((attribute) => {
      const name = getName(attribute);

      if (props.includes(name)) {
        const prop = getProp(node.attributes, name);

        const error = buildError(
          prop.start.line,
          prop.start.col,
          prop.end.line,
          prop.end.col,
          "No duplicate props allowed",
          "INFO",
          "BEST_PRACTICES"
        );

        const editRemove = buildEditRemove(
          prop.start.line,
          prop.start.col,
          prop.end.line,
          prop.end.col,
        );
  
        const fix = buildFix(`remove ${name} prop`, [
          editRemove,
        ]);

        addError(error.addFix(fix));
      } else {
        props.push(name);
      }
    });
	}
}

test.js

Expected test result: has error

duplicate props

<div test="" test={42} />
Add comment

Log in to add a comment


    Be the first one to leave a comment!

Codiga Logo
Codiga Hub
  • Rulesets
  • Playground
  • Snippets
  • Cookbooks
soc-2 icon

We are SOC-2 Compliance Certified

G2 high performer medal

Codiga – All rights reserved 2022.