CODEWITHSUNDEEP
reactjs
Miyagiborn
Miyagiborn

Reputation: 87

How to preserve children when using cloneElement

newComponent props.children is null after using React.cloneElement. Is there a way to preserve the children?

https://codesandbox.io/s/crazy-cherry-tfh2o?file=/src/App.js:0-301

import React from "react";
import "./styles.css";

export default function App() {
  const component = <div>Testing</div>;
  console.log(component);
  const newComponent = React.cloneElement(
    component,
    { person_id: 12345 },
    null
  );
  console.log(newComponent);
  return newComponent;
}

Upvotes: 1

Views: 33

Answers (2)

Martin Munilla
Martin Munilla

Reputation: 302

you just need to delete the , null part, is optional

import React from "react";
import "./styles.css";

export default function App() {
  const component = <div>Testing</div>;
  console.log(component);
  const newComponent = React.cloneElement(
    component,
    { person_id: 12345 }
  );
  console.log(newComponent);
  return component;
}

Upvotes: 2

cbr
cbr

Reputation: 13652

The children argument of React.cloneElement is optional. You can just leave it out to preserve the existing children.

const newComponent = React.cloneElement(
  component,
  { person_id: 12345 }
);

Upvotes: 1

Related Questions