React JS Uncaught Reference Error: function not defined

Question

I am trying to call shuffleCards when the upon a click event in a ReactJs component. However, I am receiving the following error:

Uncaught ReferenceError: shuffleCards is not defined

Here's my code:

constructor(props) {
    super(props);

    this.state = {
        count: 0
    };
}

shuffleCards(array) {
    var i = array.length,
        j = 0,
        temp;

    while (i--) {
        j = Math.floor(Math.random() * (i+1));

        temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

handleClickEvent(event) {
    var cards = [
        {txt: "A",
        isDisplayed: false},
        {txt: "B",
        isDisplayed: false},
        {txt: "C",
        isDisplayed: false}
    ];
    if (this.state.count == 0) {
        cards = shuffleCards(cards);
    }

}

Answer 1

EDIT Just saw the comments and that zerkms already provided you with the solution. I'll leave my answer for clarification purposes.

---

Your problem is that inside the handleClickMethod, you are calling shuffleCards instead of this.shuffleCards

shuffleCards(array) {
  // ...
}

handleClickEvent(event) {
    // ...
    if (this.state.count == 0) {
        cards = this.shuffleCards(cards); // here you should use `this.`
    }
}

The reason is because shuffleCards method is defined on your component, which is accessible from its methods via the this property.

If you defined shuffleCards within the handleClickMethod, then you could call it without accessing this:

handleClickEvent(event) {

    function shuffleCards(array) {
      // ...
    }

    // ...
    if (this.state.count == 0) {
        cards = shuffleCards(cards); // here you don't need `this.`
    }
}