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);
    }

}

@zerkms wow can't believe i didnt think of doing that. it worked. thanks! — janeeyrea
– janeeyrea, Commented Sep 21, 2016 at 23:13

nem035 · Accepted Answer · 2016-09-21 23:32:26Z

32

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.`
    }
}

edited Sep 21, 2016 at 23:32

answered Sep 21, 2016 at 23:25

nem035

35.5k6 gold badges93 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Piotr Berebecki · Accepted Answer · 2016-09-22 08:33:26Z

6

Would this work for you? Demo here: http://codepen.io/PiotrBerebecki/pen/qaRdgX

You missed this when referring to shuffleCards in the handleClickEvent method.

shuffleCards(array) {
  // logic here
}

handleClickEvent(event) {
  cards = this.shuffleCards(cards);
}

render() {
  return (
    <button onClick={this.handleClickEvent.bind(this)}>Click me</button>
  );
}

edited Sep 22, 2016 at 8:33

answered Sep 21, 2016 at 23:11

Piotr Berebecki

7,4684 gold badges37 silver badges43 bronze badges

Comments

Burak · Accepted Answer · 2019-09-24 13:42:22Z

0

I had the same problem.

And i upgrade "react-scripts" and fix this problem.

Probaply fix this.

npm i react-scripts

answered Sep 24, 2019 at 13:42

Burak

11 bronze badge

Collectives™ on Stack Overflow

React JS Uncaught Reference Error: function not defined

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related