Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect cloning of objects which have a react.element #19

Open
bpAhmadi3d opened this issue Jan 29, 2020 · 4 comments
Open

Incorrect cloning of objects which have a react.element #19

bpAhmadi3d opened this issue Jan 29, 2020 · 4 comments

Comments

@bpAhmadi3d
Copy link

Hello
I noticed that when i use CloneDeep on objects that have a react element for example :

myObj = {
  element: <div>i'm a react element</div>
}

The react element is ruined and you can't render this element any more, after console.log() the element before and after the clone i can clearly see that some changes are made to the object and its not really a "clone", this bug has forced me to not be able to use CloneDeep, i really appreciate an update for this library which fixes this issue,
Here is an example showing this issue.
thanks.

@aacristerna
Copy link

same here...

@jonschlinkert
Copy link
Owner

It's been a while, but if anyone is interested in doing a PR with unit tests for this I'd be happy to accept.

@bpAhmadi3d
Copy link
Author

@jonschlinkert I solved this issue by using these two lines:
if (React.isValidElement(val))
return React.cloneElement(val);
Basically you check to see if the value is a valid react element, if it is you clone it using the cloneElement which react provides
A more detailed answer:
https://stackoverflow.com/questions/59965693/how-can-i-deepclone-an-object-which-has-a-react-element/59966447#59966447

@jonschlinkert
Copy link
Owner

Okay, if anyone wants to do a PR without adding React as a dependency I'd be happy to merge it in.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants