Hola, estoy tratando de administrar varias casillas de verificación con múltiples entradas en el mismo mapa. ¿Alguien puede decirme cómo puedo hacerlo? Aquí está mi código. El problema principal es que cuando intento agregar alguna entrada después, otro ita toma una indexación incorrecta.

 GetCryptoHtml = (criptoList) => { return criptoList.map((value, i) => { return ( <> <div className="col-md-3 col-12"> <input className="checked" id={i + "checkbox"} type="checkbox" onChange={(e) => this.onChangeCheck(e, value, i)} name={"cryptoCurrency" + [i]} value={value.id} />{" "} <label for="vehicle1"> {value.name}</label> </div> <div className="col-md-9 col-12"> <div className="form-group"> {/* { checkingInput ? */} <input type="text" id={i + "percentage"} name={"percentage" + [i]} onChange={(e) => this.onChangeInputBox(e, i ,value.name)} value={this.state.percentage[i]} className="form-control" /> {/* <input type="text" onChange={(e) => this.checkWordInput(e)} id="percentage[i]" name="percentage[i]" /> : <></> */} {/* } */} </div> </div> <br /> </> ); });

Y aquí está la función onChange para ambos

 onChangeCheck = async (e, value, i) => { var percentage = document.getElementById(i + "percentage").value; if (e.target.checked) { this.setState({ checkedCheck: true }); this.state.data2.push(value.short_name); if (this.state.percentage[i] !== undefined) { this.state.percentage[i] = this.state.percentage[i]; } else { this.state.percentage.push(""); } } else { this.setState({ checkedCheck: false }); this.state.data2.pop(value.short_name); this.state.percentage[i] = ""; } this.setState({ cryptoCurrency: "update" });