tengo un inconveniente cuando genero los select dinámicos ya que se crean sin problemas y cuando selecciono solo el de una columna funciona sin problemas pero si selecciono ambas se cruzan los select, la idea es que me cargue por columna solo lo del cambo del select el problema es muy puntual sin embargo comparto un video corto como para ser mas claros, el video solo lo hago con el objetivo de ser mas claros con lo que necesito ya que no encontre la forma escrita para expresarlo , igual el video es corto y puntual.
video: https://www.youtube.com/watch?v=GZ5C3BBNE_g&ab_channel=videos
import React, {useContext, useState} from 'react'
let initialState = {
first: null,
arraySelect: []
};
export default function Pruebas(props) {
//divisores
const [input, setInput] = useState()
const [values, setValues] = useState([])
//multiplicacion select -1
const [input_multi, setInput_multi] = useState()
const [values_multi, setValues_multi] = useState([])
const getMods = number => {
let aux = []
for (let x = 1; x <= number; x++) {
if (number % x === 0) {
aux.push(x)
}
}
return aux
}
//multiplicacion select -1
const handleClick_multi = event => {
event.preventDefault()
setValues_multi([(+input_multi - 1), ((+input_multi - 1) * 2), ((+input_multi - 1) * 2 * 2)])
// setInput_multi('')
}
//divisores
const handleClick = e => {
e.preventDefault(); //esto previene que el form se mande.
if (+input > 0) {
const mods = getMods(+input).filter(x => x !== +input)
setValues(mods)
}
// setInput('')
}
const [arraySelect, setarraySelect] = useState(initialState.arraySelect);
const [numberIni, setnumberIni] = useState(initialState.first);
//const [arraySelect2, setarraySelect2] = useState(initialState.arraySelect2);
const [numberIni2, setnumberIni2] = useState(initialState.first);
const getArray = (value) => {
let arr = [];
{
let reco = Math.round(numberIni - parseInt(value));
console.log(reco);
if (parseInt(value) == numberIni) {
return false;
}
Array(reco)
.fill(1)
.map((value2, key) => {
arr.push(parseInt(value) + parseInt(key + 1));
});
}
return arr;
};
const getArray2 = (value) => {
let arr2 = [];
{
let reco2 = Math.round(numberIni2 - parseInt(value));
console.log(reco2);
if (parseInt(value) == numberIni2) {
return false;
}
Array(reco2)
.fill(1)
.map((value2, key0) => {
arr2.push(parseInt(value) + parseInt(key0 + 1));
});
}
return arr2;
};
const setSelect = (value) => {
let isArray = getArray(value);
if (isArray) {
setarraySelect([...arraySelect, isArray]);
}
};
const setSelect2 = (value) => {
let isArray = getArray2(value);
if (isArray) {
setarraySelect([...arraySelect, isArray]);
}
};
const handleSubmit = (event) => {
event.preventDefault();
setnumberIni(event.target.numberIni.value);
setnumberIni2(event.target.numberIni2.value);
};
const resetForm = () => {
setnumberIni(null);
setnumberIni2(null);
setarraySelect([]);
};
return (
<div>
<form onSubmit={handleSubmit}>
<div class="row">
<label>Torneo Lukas Mayores de 40 Años
</label>
<div class="col-sm-3">
<input placeholder='# Equipos inscritos' type="number" className="form-control" value={input} onChange={event => setInput(event.target.value)} />
<button onClick={handleClick} className="btn btn-info">Activar grupos</button>
</div>
<div class="col-sm-3">
<select name='numberIni' class='form-control'>
<option value='no' selected>
Seleccionar grupos
</option>
{values.map((item, index) => (
<option key={index} value={item}>
{item}
</option>
))}
</select>
</div>
<div class="col-sm-3">
<input type="number" name="numberIni2" placeholder='Equipos por grupos' class="form-control" value={input_multi} onChange={event => setInput_multi(event.target.value)} />
<button className="btn btn-info" onClick={handleClick_multi}>Activar equipos por grupos</button>
</div>
<div class="col-sm-3">
<select name='tipo_cancha' class='form-control'>
<option value='no' selected>
Seleccionar Juegos por equipos
</option>
{values_multi.map((item, index) => (
<option key={index} value={item}>
{item}
</option>
))}
</select>
</div>
</div>
<br/>
<button type="submit" className="btn btn-success" >Generar Select</button>
</form>
<div class="row">
<div class="col-sm-5">
{numberIni && (
<div> <label><font size="2">Clasificarán a Siguiente Fases Los de Mejor Promedio: </font></label>
<select onChange={(e) => setSelect(e.target.value)} name="" id="">
<option value="seleccione">Seleccione</option>
{Array(parseInt(numberIni))
.fill(1)
.map((value, key) => {
return <option value={key + 1}>{key + 1}</option>;
})}
</select>
{Array(parseInt(numberIni))
.fill(1)
.map((value, key2) => {
return (
<div>
{arraySelect[key2] && (
<>
<label><font size="2">Clasificarán a Siguiente Fases Los Primeros: </font> </label>
<select
onChange={(e) => setSelect(e.target.value)}
name=""
id=""
>
<option value="seleccione">Seleccione</option>
{arraySelect[key2].map((value, key3) => {
return (
<option value={arraySelect[key2][key3]}>
{arraySelect[key2][key3]}
</option>
);
})}
</select>
</>
)}
</div>
);
})}
</div>
)}
</div>
<div class="col-sm-3">
{numberIni2 && (
<div>
<label><font size="2">Ubicados en la </font> </label>
<select onChange={(e) => setSelect2(e.target.value)} name="" id="">
<option value="seleccione">Seleccione</option>
{Array(parseInt(numberIni2))
.fill(1)
.map((value, key0) => {
return <option value={key0 + 1}>{key0 + 1}</option>;
})}
</select>
<label><font size="2"> Posición</font> </label>
{Array(parseInt(numberIni2))
.fill(1)
.map((value, key02) => {
return (
<div>
{arraySelect[key02] && (
<>
<label><font size="2">Ubicados en la </font> </label>
<select
onChange={(e) => setSelect2(e.target.value)}
name=""
id=""
>
<option value="seleccione">Seleccione</option>
{arraySelect[key02].map((value, key03) => {
return (
<option value={arraySelect[key02][key03]}>
{arraySelect[key02][key03]}
</option>
);
})}
</select>
<label><font size="2"> Posición</font> </label>
</>
)}
</div>
);
})}
</div>
)}
</div>
</div>
{numberIni && (
<input onClick={() => resetForm()} type="button" value="Reiniciar" />
)}
</div>
);
};