Estoy haciendo un tirador de dados en javascript con React. Básicamente, tengo una matriz con valores de dados y un ciclo que los recorre para generar dados para que el usuario los tire. Ahora estoy tratando de crear una entrada para que el usuario pueda hacer un nuevo dado con cualquier cantidad de lados, pero tengo problemas para conectar esa entrada con el resto de mi código. ¡Avíseme si tiene alguna idea sobre cómo podría hacer esto con javascript! ¡Gracias!

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; function RenderButtons(props){ return( <button className="center" data-index={props.index} id="roller" onClick={props.onClick}> {props.value.current} /{props.value.max} </button> ) } class Roller extends React.Component { constructor(props) { super(props); this.roll = this.roll.bind(this) this.state = { diceValues: [ {max:100, current:100}, ], } } roll(evt) { let min = 1; let max = this.state.diceValues[evt.target.dataset.index].max let result = Math.floor(Math.random() * (max - min) + min); const diceValues = this.state.diceValues.slice(); diceValues[evt.target.dataset.index].current = result + 1; this.setState({diceValues: diceValues}); } makeDie(i) { return( <RenderButtons key = {i} onClick = {this.roll} value = {this.state.diceValues[i]} index = {i} /> ) } render() { let buttonsToMake = []; for (let i = 0; i < 1; i++){ console.log("rendering buttons") buttonsToMake.push(this.makeDie(i)) return ( <div> <input type="number" placeholder="Custom Dice" ></input> <button // id="input" // value={this.state.value} // onChange={console.log(this.state.value)} // {this.handleChange} > Generate Die </button> {buttonsToMake} </div> ) } } } ReactDOM.render( <Roller />, document.getElementById('root') );