React: Error: "f.hasOwnProperty is not a function"

[yume-chan]

Describe what you were doing when the bug occurred:

1. Open https://codesandbox.io/s/angry-mestorf-cbvdv
2. Open DevTools, and try to inspect the component

---

Please do not remove the text below this line

DevTools version: 4.3.0-3e0967783

Call stack: at ha (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:268899)
at ii (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59363)
at Sl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:107431)
at Ic (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:99973)
at Tc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:99898)
at vc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:96672)
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:46436
at n.unstable_runWithPriority (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:3676)
at $o (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:46146)
at na (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:46382)

Component stack: in ha
in div
in Ka
in div
in bi
in div
in Ai
in Suspense
in ei
in div
in div
in la
in Ur
in vo
in Unknown
in n
in Unknown
in div
in div
in Qi
in Ve
in nn
in Da
in Yc

[AMalloch]

Not 100% sure what you're getting at as f is no longer present in the code you're providing, nor do I get any console errors. But I suspect (looking at the pr title) its because you were calling the hasOwnProperty function on something that was not an object or undefined etc.

You could check for a property on your object as follows

const userObject = {
  name: 'yume',
  age: 42
};

userObject.hasOwnProperty('name');  => true
userObject.hasOwnProperty('age');  => true
userObject.hasOwnProperty('banana');  => false

This will return true or false depending if it finds the property or not.

I hope that helps you, also I have no idea if you're 42 I just took that from your code 😄.

[diogom93]

All objects have the hasOwnProperty function, so you cannot simply assign any other value to it. I suggest you rename the property hasOwnPropertyModified (or something that is more relevant to your use case) and it'll work just fine!

[yume-chan]

@diogom93 The source objects are not controllable by me.

And there is no limitation for objects to override their hasOwnProperty field.

Even the MDN has told you not to call hasOwnProperty on any random objects you got.

JavaScript does not protect the property name hasOwnProperty; thus, if the possibility exists that an object might have a property with this name, it is necessary to use an external hasOwnProperty to get correct results:

var foo = {
  hasOwnProperty: function() {
    return false;
  },
  bar: 'Here be dragons'
};

foo.hasOwnProperty('bar'); // always returns false

// Use another Object's hasOwnProperty
// and call it with 'this' set to foo
({}).hasOwnProperty.call(foo, 'bar'); // true

// It's also possible to use the hasOwnProperty property
// from the Object prototype for this purpose
Object.prototype.hasOwnProperty.call(foo, 'bar'); // true

[diogom93]

@diogom93 The source objects are not controllable by me.

Sorry, I didn't understand that from the original post.

And there is no limitation for objects to override their hasOwnProperty field.

Even the MDN has told you not to call hasOwnProperty on any random objects you got.

You're absolutely right. Perhaps this helps!

[bvaughn]

FYI this issue should be fixed in v4.4 (released today)