CODEWITHSUNDEEP
reactjsfirebase
Username
Username

Reputation: 2210

How can I trigger a function when one of my state changes?

When ever someone clicks on a sidemenu button, the state in my component changes( like from "New York Knicks" to "Boston Celtics"). In componentDidMount, I have 

componentDidMount() {
        TeamStore.addChangeListener(this._onChange);
        var knicksRef = new Firebase(this.props.baseUrl + this.state.name + "/results");

        this.bindAsArray(knicksRef, 'articles');

    }

Which basically takes an array from the states category and binds it as an array to "articles". However, I was hoping that every time the state changes, it would pull from a different category and bind that to articles instead. How can I make that work?

Upvotes: 0

Views: 87

Answers (1)

Pierre Criulanscy
Pierre Criulanscy

Reputation: 8686

ComponentDidMount as said in the doc will only be called once.

You want to perform an action when the state change. I guess you're calling setState() in your _onChange method, so just wrap your logic into another method and call it from _onChange and componentDidMount methods.

Note that you could also put this logic inside the componentDidUpdate which is called whenever the component, well, did just update itself when the state has changed. But it will not be called on the first render.

So, finally, I think you should do something like this:

componentDidMount() {
    TeamStore.addChangeListener(this._onChange);
    this._updateKnickRef();
}

_onChange() {
    //update state here
    this._updateKnicksRef();
}

_updateKnicksRef() {
    var knicksRef = new Firebase(this.props.baseUrl + this.state.name + "/results");

    this.bindAsArray(knicksRef, 'articles');
}

Upvotes: 2

Related Questions