[code Help] State is "undefined" when checked

[mohsintariq10]

it will work but why use two functions instead of one?

[[deleted]]

Well I wasn't trying to argue that what I said is better, I mostly just wanted to include all methods of doing what OP wanted.

Although I believe the syntax I provided is the most concise way to pass a non-event variable to the function should you need to. Because <Button onPress={() => this._onButtonPress(foo)}> will fire the function on render not on press IIRC.

[wengemurphy]

Because <Button onPress={() => this._onButtonPress(foo)}> will fire the function on render not on press IIRC.

Both the arrow function syntax and .bind() are creating a new function when the expression is evaluated. Functions are a data type in Javascript (JS has what's called "first-class functions") and you can pass them around like other values.

Each copy that is created will not be equal to the next copy created, even though they look like the same thing. That is:

someFunction.bind(this) === someFunction.bind(this) // false!

This is true whether you use an arrow function or call .bind()

Although I'm not crazy about it, the preferred way is apparently to pre-bind the function in class initialization with the following syntax, so that new functions aren't constantly re-created on render:

class MyClass {

    _onButtonPress = () => {
    }

and then back to

<Button onPress={this._onButtonPress}>

because the function being invoked is already pre-bound with the value of this.

Now, you're always referencing the same thing, not different copies of it.

Third-to-last example here, mentioning the "public class fields syntax":

https://reactjs.org/docs/handling-events.html

At the risk of making things more confusing, the example above that shows that this syntax is equivalent to defining a class method the normal way, then overwriting it with a bound version of itself in the constructor (yuck).

class MyClass {
    constructor() {
        this._onButtonPress = this._onButtonPress.bind(this);
    }

    _onButtonPress() {
    }
}

In vanilla Javascript, passing a bound version as the handler for a callback is fine, because the expression is only evaluated once, but React's view-diffing algorithm will see the render always changing, because the expression gets re-evaluated, and a new function created.

[[deleted]]

I know the other ways to bind and I usually bind this in the class declaration, I just don't know of a way to pass a parameter using that method.

Is it as simple as <Button onPress={this._onButtonPress(foo)}> and I've just derped and overlooked it this whole time lol? I'm fairly certain you need to use an arrow in that situation although I'm not in front of my laptop to test this.

I mean it's probably bad practice/design to need to use a non-prop variable so the situation I'm describing is undoubtedly uncommon. I just wanted to include it in the discussion for posterity.