no-children-prop

Try in Playground

react-best-practices

Daniel StrongBest PracticeWarning

No tags

No CWE or CVE

Children should always be actual children, not passed in as a prop.

When using JSX, the children should be nested between the opening and closing tags.

View a similar ESLint rule.

Ast Rule: html element

no-children-prop

How to write a rule

/**
 * handles all the logic when Codiga hits an assignment in file's AST
 */
function visit(node, filename, code) {
  if (!node.tag) return;
  if (!node.attributes) return;
  if (!node.attributes.length === 0) return;
  // if the tag does't start with a capital, skip it
  if (node.tag.value[0].toUpperCase() !== node.tag.value[0]) return;

  node.attributes.forEach((attribute) => {
    if (attribute?.name?.value === "children") {
      const error = buildError(
        attribute.name.start.line,
        attribute.name.start.col,
        attribute.name.end.line,
        attribute.name.end.col,
        "Children should always be actual children, not passed in as a prop.",
        "WARNING",
        "BEST_PRACTICES"
      );
      addError(error);
    }
  });
}

invalid-children-prop

Expected test result: has error

function App() {
	return (
    <Container children={
	    <div>
	    	<p>Hello World</p>    
    	</div>
    } />
  )
}

valid-children.jsx

Expected test result: no error

function App() {
	return (
    <div>
    	<p>Hello World</p>
    </div>
  )
}

Add comment

Be the first one to leave a comment!