Returning a random string...button only works once

JavaScript
1

here’s my code: https://codepen.io/aetones/pen/yLORqbY

I have two arrays which I am trying to return a random string from each. The button seems to be working, but only once. I am not sure how to get it working each time I click the button. If you could suggest what to review to solve this or any hints, thank you!

2

Your randomNumber value is initialised on page-load, it seems. So the button is working, but always returns the same quote because the random number never changes.

1 Like
3

Figured that’s what was happening, I am not sure how to update the random number. Could it work doing something similar to this? https://www.freecodecamp.org/learn/front-end-libraries/react/use-state-to-toggle-an-element

4

You could, I think. I was able to fix it by moving your existing declaration into the click function.

2 Likes
5

Well, that was an easy fix. Thank you.

1 Like
6

One more question. I notice it is taking the previous index from the quote and setting it as the current for the author. Why is not using the current index?

handleClick () {
    this.setState({
      quote: theQuotes[ Math.floor(Math.random()*theQuotes.length)],
      author: theAuthors[theQuotes.indexOf(this.state.quote)]
    })
   }
7

I believe that’s because you’re setting the author by this.state.quote. The change in the state happens all at once, so your this.state.quote is using the current value, not the value that you’re changing to.

I’d ask why you coded the random number into the setState directly, rather than moving the variable declaration into the handleClick function :thinking:

8

I misunderstood what you meant in your previous fix. I think I got it right this time and it seems to be working.

 handleClick () {
     var randomNumber = Math.floor(Math.random()*theQuotes.length);
    this.setState({
      quote: theQuotes[randomNumber],
      author: theAuthors[randomNumber]
    })
   }
1 Like
9

That’s the approach I would take! :smiley:

10

Thanks for walking me through that.

1 Like