I am using useState in React. After x number of time (15-20) getRandomNumbers function does not give random numbers anymore. It gives only one number over and over.
What am i doing wrong here???
import {useState} from "react";
function App() {
const [numbers, setNumbers] = useState(['1','2','3','4', '5']);
function getRandomNumbers(){
let result = [];
for(let i = 0; i < numbers.length; i++){
result.push(numbers[Math.floor(Math.random() * numbers.length)]);
}
// setting new array in numbers
setNumbers(numbers => result);
}
const displayNumbers = numbers.map((no, i) => {
return (
<div key={i}>{no}</div>
);
});
return (
<div>
{displayNumbers}
<br/>
<button type='button' onClick={() => getRandomNumbers()}>Click</button>
</div>
);
}
export default App;
you need to take out the range of allowed values
Imagine that after the first click there will be several identical numbers in the array, for example [1, 1, 1, 5, 3]
The probability of rolling a 1 is much higher than a 3 or 5.
solution link --> https://codesandbox.io/s/cool-cache-09xkid?file=/src/App.js
Also post solution here:
import { useState } from "react";
const allowedNumbers = ["1", "2", "3", "4", "5"];
function App() {
const [numbers, setNumbers] = useState(Array.from(allowedNumbers));
function getRandomNumbers() {
let result = [];
for (let i = 0; i < numbers.length; i++) {
result.push(allowedNumbers[Math.floor(Math.random() * allowedNumbers.length)]);
}
// setting new array in numbers
setNumbers((numbers) => result);
}
const displayNumbers = numbers.map((no, i) => {
return <div key={i}>{no}</div>;
});
return (
<div>
{displayNumbers}
<br />
<button type="button" onClick={() => getRandomNumbers()}>
Click
</button>
</div>
);
}
export default App;