Как показать случайные числа по возрастанию на reactjs
Создаю аналог игры лото на react. При нажатии на кнопку должны выпадать случайные числа и числа которые выпали не должны повторяться. Но числа должны идти по возрастанию от меньшего к большему. Не могу придумать как это сделать. Подскажите пожалуйста если есть идеи. Рендер приложения
import { Component } from "react";
import Number from "./number/number";
class App extends Component {
state = {
numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36]
};
randomNumbers = () => {
let numbers = (this.state.numbers).sort(() => Math.random() - 0.5);
let number = numbers[0];
const index = numbers.indexOf(number);
if (index > -1) {
numbers.splice(index, 1);
}
this.setState({number: index})
};
render() {
return (
<div className="App">
<button className='button' onClick={this.randomNumbers}>New numbers</button>
<div className='wrapper'>
<Number number={this.state.numbers[0]} />
<Number number={this.state.numbers[1]} />
<Number number={this.state.numbers[2]} />
<Number number={this.state.numbers[3]} />
<Number number={this.state.numbers[4]} />
</div>
</div>
);
}
};
export default App;
Рендер его компонента
import { React } from 'react';
import './number.css';
const Number = props => {
return (
<div className='wrapper_number'>
<div className='number'>{props.number}</div>
</div>
)
};
export default Number;
И стили
.wrapper{
display: flex;
justify-content: center;
}
.button{
margin: 50px 43%;
padding: 10px 30px;
font-size: 20px;
}
.wrapper_number{
display: flex;
justify-content: center;
}
.number{
width: 40px;
height: 40px;
border: 2px solid #000;
border-radius: 50%;
margin: 20px 10px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 900;
font-size: 25px;
}