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

Throw more specific error if passed undefined in React.cloneElement #12534

Merged
5 changes: 5 additions & 0 deletions packages/react/src/ReactElement.js
Original file line number Diff line number Diff line change
Expand Up @@ -290,6 +290,11 @@ export function cloneAndReplaceKey(oldElement, newKey) {
* See https://reactjs.org/docs/react-api.html#cloneelement
*/
export function cloneElement(element, config, children) {

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: extra line

if (!element) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's be more specific here. Only null and undefined trigger that error, right?

Copy link
Contributor Author

@wherestheguac wherestheguac Apr 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes it’s basically a cannot read property ‘props’ of undefined/null problem where it tries to copy the props of the original element I think. So it should explicitly check if element is null or element is undefined and throw a specific error for each of those cases?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One error for both cases is fine

throw new TypeError('Cannot clone null or undefined.');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the rest of the codebase we use a function called invariant for errors. That integrates with our system that replaces error messages with error codes in production builds. Could you use it here too?

invariant(false, 'message')

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that’s really cool, I’ll put that in there

}

let propName;

// Original props are copied
Expand Down