logoESLint React
Rules

no-clone-element

Full Name in eslint-plugin-react-x

react-x/no-clone-element

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-clone-element

Presets

  • core
  • recommended
  • recommended-typescript
  • recommended-type-checked

Description

Disallow cloneElement.

Using cloneElement is uncommon and can lead to fragile code. This also makes it harder to trace the data flow. Try the alternatives instead.

Examples

Failing

import { cloneElement } from "react";
 
const clonedElement = cloneElement(
  <Row title="Cabbage">Hello</Row>,
  { isHighlighted: true },
  "Goodbye",
);
 
console.log(clonedElement); // <Row title="Cabbage" isHighlighted={true}>Goodbye</Row>

Implementation

Further Reading

On this page