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

recommended / recommended-type-checked / recommended-typescript, strict / strict-type-checked / strict-typescript, x

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

• Rule Source
• Test Source

Further Reading

• Legacy React APIs cloneElement