CODEWITHSUNDEEP
javascriptjquerynode.jsreactjs
TheLovelySausage
TheLovelySausage

Reputation: 4094

React.js function not firing

I recently saw a warning pop up on one of my projects saying that the React.createClass is now deprecated so I'm going through some of the code to make it compatible with the new recommendations.

One thing I've run into though is that one of my functions doesn't seem to fire like it used to.

class Example extends React.Component {

    constructor() {

        super();
        this.state = { content: "Initialize" }

    }

    changeScreen(newScreen) {

        // this fires
        alert("fired 01");

        // this function does not
        this.testFunc;

        var screen = "";

        switch(newScreen) {
            case "one":
                screen = "var01";
                break;
            case "two":
                screen = "var02";
                break;
            default:
                screen = "failed";
                break;
        }

    }

    testFunc() {
        alert("fired 02");
    }

    render() {

        return (
            <div>
                <External.Element execChangeScreen={this.changeScreen} />
                {this.state.content}
            </div>
        );

    }

}

ReactDOM.render (
    <Example />,
    document.getElementById("app")
);

I can't seem to get testFunc to fire, I've tried calling like follows

this.testFunc();
this.testFunc;
() => this.testFunc();

I'm not sure why but I think it may have something to do with this

UPDATE

All of the answers bellow are correct, the one I marked as accepted seems the clearest to me but thanks to everyone for their help

Upvotes: 0

Views: 451

Answers (4)

Tom Van Rompaey
Tom Van Rompaey

Reputation: 3586

You'll need to execute changeScreen() in the correct scope by using an arrow function syntax.

<External.Element execChangeScreen={() => this.changeScreen('one')} />

And inside the changeScreen() function, make sure to call testFunc correctly.

changeScreen(newScreen) {

    // this fires
    alert("fired 01");

    // this function does not
    this.testFunc();
    ...
}

Upvotes: 1

Tharaka Wijebandara
Tharaka Wijebandara

Reputation: 8065

You have to explicitly set the this inside changeScreen

So use

<External.Element execChangeScreen={this.changeScreen.bind(this)} />

instead of

<External.Element execChangeScreen={this.changeScreen} />

and call your function

this.testFunc();

Upvotes: 1

Tom Fenech
Tom Fenech

Reputation: 74595

Now that you're not using React.createClass, you no longer have this automatically bound for you. The problem is at the point where this.changeScreen is called.

The simplest change to your code would be to bind it in the constructor:

this.changeScreen = this.changeScreen.bind(this);

Then make sure you're actually calling your function:

this.testFunc();

If you write this.changeScreen.bind(this) in your render method instead, you make a new copy of your function every time the component is rendered.

Upvotes: 1

maxwellgover
maxwellgover

Reputation: 7111

Try testFunc = () => {} or bind it in the constructor method like this.testFunc = this.testFunc.bind(this)

Upvotes: 1

Related Questions