no-clone-element

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-clone-element

Full Name in eslint-plugin-react-x

react-x/no-clone-element

Presets

x recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Description

Disallows cloneElement.

Using cloneElement is uncommon and can lead to fragile code. It also makes it harder to trace 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