React stops rendering after the 3rd click of the button

I have been trying to display quotes from the array using a state. On a continuous click of the button, the page goes blank. Here is the link for my pen. Also in the console, this appears.


I tried runnning the code in codesandbox and the result was the same. The error is in the component. The link for the same is here
Please help. Thanks in advance

The problem is your handleSubmit function.

handleSubmit() {
  this.setState(state => ({
    count : this.state.count + Math.floor(Math.random() * 3)
  }));
}

The count value will continously increase as you click the button, until it reaches a value that is too big as an index to the messages array. When this happens, the error occurs. Make sure the value of count always is a valid index value of messages.

Okay. But I did try adding the if construct as follows…

handleSubmit() {
    if (this.state.count === 2) { 
         this.setState({
           count  : 0
         })
    }
    this.setState(state => ({
        count : this.state.count + 1
    }));
}

Even this resulted in the same issue. What do I do to stop it?

Not sure why you are adding the current value of the count property anyway. You just need to assign the count property a random integer between 0 and 2 (the last part of @joops75 suggestion). I also would not hard code the 3. I would use the length of the array in the calculation. You learned the exact formula in the Basic JavaScript section of the curriculum, so you might want to review that if necessary.

I will warn you though, if you do not have a lot of quotes, you will fail test #9 that makes sure the same quote does not appear twice in a row when the button is clicked.

You have an other issue you need to fix also. You are not using Redux, so you should remove from the External Scripts section of the JS module. It was causing a strange error because you had it placed before the other React script.

Thanks a lot for clarifying why the error persisted.! Shall review the Basic JS. And also shall do the necessary corrections. Thank you so much @RandellDawson and @joops75 for taking time and explaining the origin of the error.

To make it more readable, I suggest changing the property name count to quoteIndex. You are using it as a index of the quotes array, so this makes more sense.

I corrected the code and still the page goes blank after certain number of clicks. I think I made a mistake in the External Source addition. Here’s what I did. Please guide

Try adding { console.log(this.state.quoteIndex) } in the div before the h1. Open the console and see if you can spot the issue. Think about what you are assigning to quoteIndex it should be a valid index usable on the messages array. You can also look at the Math.random page for some help on how to get the correct index.

Your current code still is trying to add this.state.quoteIndex to a random index (the Math.random part). You should not be adding anything. You just need to the random index part and you will pass all the tests.

Oh yes! I didn’t think about it. Thank you so much. All the tests passed.!

Thank you for guiding