Math.random() running multiple times

Question

I am making a random image generator, which needs to display 14 random images. This works, however those 14 random images are being replaced with others 3 times in a call.

I don't want this to happen, but I have no clue on how to stop this. I think that math.random() is causing the issue, but I'm not sure. I am running this script on React.JS

My code:

for (var g=0; g < 14; g++) {
    var rdmNumber = Math.floor(Math.random() * 14) + 1;
    var imgName = "img_" + rdmNumber +".png";
    var src = "img" + "/" + imgName;
    indents.push(<div className="item-picture" key={c}><img src= {src8}className="item-img" alt="Your possible winnings" /></div>);
}

The indents.push is the output of my call, which is being displayed as followed:

{indents}

.gif from what is happening: https://gyazo.com/c576c52a90843a9ab055790610303fe4

Thanks in advance.

EDIT I don't need unique images, I just want them to stay the same, and not replace as seen in the .gif

I don't think this code is quite enough for us to help you. Can you show more of the relevant code? — Tholle, Jun 24 '18 at 17:55
Isn't it possible for `Math.floor(Math.random() * 14) + 1` to return the same value more than once, even though you execute it multiple times? E.g., the random sequence could be `4 1 7 3 6 3 8 12 9`, which as you can see already "replaces" one of your images with image 3. Have you tried creating an array from 1 to 14, and then randomly sampling from that array without replacement? This might be what you want. Or you could create an array 1 to 14, shuffle it, then just iterate through normally, thus simulating randomness by doing the shuffle. — Corey Levinson, Jun 24 '18 at 17:56
take a look [here](https://stackoverflow.com/questions/2380019/generate-unique-random-numbers-between-1-and-100) — gaetanoM, Jun 24 '18 at 17:59
@Tholle I now included the part which outputs the images. That's all I have @G — Kipcarry, Jun 24 '18 at 18:00
@gaetanoM I don't need unique images, I just want them to stay the same, and not replace as seen in the .gif — Kipcarry, Jun 24 '18 at 18:01
@CoreyLevinson Your last suggestion sounds good, although I have no idea how to make something like that. — Kipcarry, Jun 24 '18 at 18:02
@Kipcarry See https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array — Corey Levinson, Jun 24 '18 at 23:27

score 1 · Answer 1 · answered Jun 24 '18 at 18:02

1

You might have written this code inside render function which will run every time there is some change.

Try to write this code in componentWillMount.

answered Jun 24 '18 at 18:02

Sakshi Nagpal

1,003
7
16

I tried, however when I do so it says {indents} is undefined. – Kipcarry Jun 24 '18 at 18:04

Herman Starikov · Answer 2 · 2018-06-24T18:20:44.473

0

What you want is create an array of random images once, outside of render, and then render that.

Do it outside of the component, or in the constructor.

// outside of your component
let images = []
for (var g=0; g < 14; g++) {
    var rdmNumber = Math.floor(Math.random() * 14) + 1;
    var imgName = "img_" + rdmNumber +".png";
    var src = "img" + "/" + imgName;
    images.push(src);
}

// in your component's render method
images.forEach(url => 
    indents.push(<div className="item-picture" key={url}>
        <img src= {url}className="item-img" alt="Your possible winnings"/>
    </div>)
)

// and you can render {indents} somewhere after that

edited Jun 24 '18 at 18:20

answered Jun 24 '18 at 17:56

Herman Starikov

2,636
15
26

And how would I achieve that? I am a rookie. – Kipcarry Jun 24 '18 at 18:02
I forgot to mention how important the {indents} part is. As I call multiple of these functions there name all need to be unique. Do I need to enter 0 -> 14 in the let images array? A little bit more of explanation of how this code works would be appreciated :-). http://prntscr.com/jysbzh – Kipcarry Jun 24 '18 at 18:13
that other answer suggested to use componentWillMount, not componentWillUnmount I must admit, it's a pretty confusing piece of code you got there. I'd suggest making it work for one array of indents first. And then extract it into a function instead of copying code over and over. – Herman Starikov Jun 24 '18 at 18:25
This also gives me the following error: Line 99: 'map' is not defined no-undef Line 99: 'indents' is not defined no-undef – Kipcarry Jun 24 '18 at 18:26
I just noticed that too, I made a new componentWillMount (because none existed) and it still gave me the same error I mentioned here above :( – Kipcarry Jun 24 '18 at 18:28
well, indents need to be defined. I updated my code example again. Try moving the first part outside of your react component (before imports), and the `forEach` part into you render function, where I guess indents is defined. – Herman Starikov Jun 24 '18 at 18:28
Looks like it should work, however imports are obligated to be at the top (http://prntscr.com/jyshfu) – Kipcarry Jun 24 '18 at 18:31
I meant after imports. It's odd indents is still undefined – Herman Starikov Jun 24 '18 at 18:38
Because we didn't define it yet. I don't know what you meant with images.push(src). But you replaced my indents.push() with that piece of code, that's why it isn't defined. Could I change it? – Kipcarry Jun 24 '18 at 18:40
oh, well, change it back to `images.push(src)` the way it is in my example. Did you get it working? – Herman Starikov Jun 24 '18 at 19:33
I'm sorry, what do I need to do? – Kipcarry Jun 25 '18 at 10:24

Math.random() running multiple times

2 Answers2