Tengo un select dinamico que funciona de la siguiente forma explico:
Hay un input donde agrego un valor "X" y al darle clic al boton que se llama "generar select" me agreaga cantidad de valores que agregue en el input
Cuando selecciono un valor del select este me carga otro select dinamico donde me aparece los números faltantes de forma ascendente y asi hasta seleccionar el ultimo numero, y cada select que se va generando va mostrando un boton que se llama "crear".
Opción 1
Lo que necesito es que cada vez que se vaya generando un select dinamico el boton que se llama "crear" solo vaya quedando en el ultimo array.
import React, { useState } from "react";
let initialState = {
first: null,
arraySelect: []
};
const Test = () => {
const [arraySelect, setarraySelect] = useState(initialState.arraySelect);
const [numberIni, setnumberIni] = useState(initialState.first);
const [selectedNumbers, setSelectedNumbers] = useState([]);
const getArray = (value) => {
const numValue = parseInt(value, 10);
const arr = [];
for (let i = 0; i < numValue - 1; i++) {
arr.push(numValue - i - 1);
}
if (arr.length) {
return arr;
}
};
const setSelect = (value) => {
let isArray = getArray(value);
if (isArray) {
setarraySelect([...arraySelect, isArray]);
}
};
const handleChange = (index, value) => {
const tmpSelectedNumbers = [...selectedNumbers];
tmpSelectedNumbers[index] = value;
setSelectedNumbers(tmpSelectedNumbers);
};
const handleSubmit = (event) => {
event.preventDefault();
setnumberIni(event.target.numberIni.value - 1);
};
const resetForm = () => {
setnumberIni(null);
setarraySelect([]);
};
return (
<div>
<form onSubmit={handleSubmit}>
<input name="numberIni" type="number" />
<input type="submit" value="Generar select" />
</form>
{numberIni && (
<div>
<select
onChange={(e) => handleChange(0, e.target.value)}
name=""
id=""
>
<option value="seleccione">Seleccione</option>
{Array(parseInt(numberIni))
.fill(1)
.map((value, key) => {
return (
<option value={numberIni - key}>{numberIni - key}</option>
);
})}
</select>
<button
type="submit"
className="btn btn-success"
onClick={() => {
setSelect(selectedNumbers[0]);
}}
>
crear
</button>
{Array(parseInt(numberIni))
.fill(1)
.map((value, key2) => {
return (
<div>
{arraySelect[key2] && (
<>
<select
onChange={(e) => handleChange(key2 + 1, 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>
<button
type="submit"
className="btn btn-success"
onClick={() => {
setSelect(selectedNumbers[key2 + 1]);
}}
>
crear
</button>
</>
)}
</div>
);
})}
</div>
)}
{numberIni && (
<input onClick={() => resetForm()} type="button" value="Reiniciar" />
)}
</div>
);
};
export default Test;
ANEXO
Respecto a la solución que me dan no me funciona en mi proyecto , agrego el codigo exactamente igual y no me funciona , el codigo actual de mi proyecto tiene el mismo codigo lo único que cambia es que tiene dos input inicialmente y tiene un campo input al lado del select donde se van creando pero no afecta en nada al codigo como tal, no se por que no me funciona si agregue exactamente el código y los botones de crear no aparecen por ningún lado:
import React, { useState} from "react";
//input dinamico
import Row from "./Row2";
let initialState = {
first: null,
arraySelect: [],
arraySelect2: []
};
function test(props) {
//input dinamico
const [rows, setRows] = useState([]);
const [initialeRow, setInitialRow] = useState({ nombre: "" });
//SELECT2
const [selectedNumbers, setSelectedNumbers] = useState([]);
const handleOnChange = (index, value) => {
const copy = rows.map((e, i) => {
if (i === index) {
e.nombre = value;
}
return e;
});
setRows([...copy]);
};
//division
const [number, setNumber] = useState();
//Mostrar 4
const [modocuatro, setModoCuatro] = useState(null);
//Mostrar 5
const [modoboton, setModoBoton] = useState(null);
//modo cuatro
const handleClick_cuatro = (event) => {
event.preventDefault();
setModoCuatro(true);
global.multi = global.nuevo * global.select1;
console.log(global.multi + "resultado");
};
const handleInput_division = (event) => {
const { name, value } = event.target;
setNumber({ ...number, [name]: value });
};
const handleInput_division2 = (event) => {
const { name, value } = event.target;
setSelect(value)
setNumber({ ...number, [name]: value });
setInitialRow({ nombre: value * 1 + 1});
};
const [arraySelect, setarraySelect] = useState(initialState.arraySelect);
const [arraySelect2, setarraySelect2] = useState(initialState.arraySelect2);
const [numberIni, setnumberIni] = useState(initialState.first);
const [numberIni2, setnumberIni2] = useState(initialState.first);
const getArray = (value) => {
let arr = [];
{
let reco = Math.round(numberIni - parseInt(value));
console.log(reco + "mi");
if (parseInt(value) == numberIni) {
return false;
}
Array(reco)
.fill(1)
.map((value2, key) => {
arr.push(parseInt(value) + parseInt(key + 1));
});
}
return arr;
};
const setSelect = (value) => {
//debugger;
let isArray = getArray(value);
if (isArray) {
setarraySelect([...arraySelect, isArray]);
setModoBoton(true);
}
if (isArray) {
setInitialRow({ nombre: value});
setRows([...rows, { nombre: value}]);
}
};
//segundo array
const getArray2 = (value) => {
const numValue2 = parseInt(value, 10);
const arr2 = [];
for (let i = 0; i < numValue2 - 1; i++) {
arr2.push(numValue2 - i - 1);
}
if (arr2.length) {
return arr2;
}
};
//segundo select
const setSelect_select2 = (value) => {
let mi=global.division2020;
let isArray2 = getArray2(value);
if (isArray2) {
setarraySelect2([...arraySelect2, isArray2]);
setInitialRow({ nombre: initialeRow.nombre * 1 + 1 }) ;
setRows([...rows, initialeRow]);
}
};
//SEGUNDO SELECT
const handleChange = (index, value) => {
const tmpSelectedNumbers = [...selectedNumbers];
tmpSelectedNumbers[index] = value;
setSelectedNumbers(tmpSelectedNumbers);
};
const handleSubmit = (event) => {
event.preventDefault();
setnumberIni(event.target.numberIni.value);
setnumberIni2(event.target.numberIni2.value - 1);
};
const resetFormtodo = () => {
setnumberIni(null);
setnumberIni2(null);
setRows([]);
setarraySelect([]);
setarraySelect2([]);
};
return (
<div>
<form onSubmit={handleSubmit}>
<div class="row">
<div class="col-sm-3">
<h6>INGRESA UN PRIMER VALOR "GRUPOS"</h6>
<div class="input-group ">
<select
name="numberIni2"
class="form-control"
onChange={ handleInput_division }
>
<option value="0" selected>Seleccione</option>
<option value="10"> 10 </option>
<option value="20">20</option>
</select>
<br />
</div>
</div>
<div class="col-sm-3">
<h6>INGRESA UN SEGUNDO VALOR</h6>
<div class="input-group ">
<input
type="number"
name="numberIni"
placeholder="0"
class="form-control"
/>
<br />
<button type="submit" className="btn btn-primary">
GENERAR
</button>
</div>
</div>
</div>
</form>
<br />
<div>
<hr/>
</div>
<br /> <br />
<div class="row">
<div class="col-sm-12">
{numberIni && (
<div>
<h6>Criterio Para Equipos Clasificados a la Siguiente Fase</h6>
<label>
<font size="2">
1° Clasificados Por Grupo <br />
Clasificarán a Siguiente Fases Los Primeros : {" "}
</font>
</label>
<select
onChange={handleInput_division2}
name="numberIni3"
>
<option value="seleccione">Seleccione</option>
{Array(parseInt(numberIni))
.fill(1)
.map((value, key) => {
return <option value={key + 1}>{key + 1} Equipos</option>;
})}
</select>
<label>
<font size="2"> Equipos De Cada Grupo </font>{" "}
</label>
<label>
<font size="2">
{" "}
{" "}
{modoboton ? (
<button
className="btn btn-primary"
onClick={handleClick_cuatro}
>
Generar select
</button>
) : (
<></>
)}
{" "}
</font>{" "}
</label>
<hr />
{modocuatro ? (
<div class="col-sm-10" style={{ top: "-20px" }}>
{Array(parseInt(numberIni2))
.fill(1)
.map((value, key2) => {
return (
<div>
{arraySelect[key2] && (
<>
<label>
<font size="2">
<label>
<font size="2">
{" "}
{" "}
<div class="row">
<div class="col-sm-9">
<h6>Segundos Clasificados Por Grupo</h6>
<label><font size="2">Clasificarán a Siguiente Fases Los de Mejor Promedio :
<select
onChange={(e) => handleChange(0, e.target.value)
}
name=""
id=""
>
<option value="seleccione">Seleccione</option>
{Array(parseInt(numberIni2))
.fill(1)
.map((value, key) => {
return (
<option value={numberIni2 - key}>{numberIni2 - key} Equipos</option>
);
})}
</select> {console.log(arraySelect)} Ubicados en la
{arraySelect.length === 0 && (
<div className="col-sm-2" style={{top:"-27px", right:"-135%"}}>
<button
type="submit"
className="btn btn-primary"
onClick={() => {
setSelect_select2(selectedNumbers[0]);
}}
>
crear
</button>
</div>
)}
</font> </label>
{Array(parseInt(numberIni2))
.fill(1)
.map((value, key2) => {
return (
<div>
{arraySelect2[key2] && (
<>
<h6>Segundos Clasificados Por Grupo</h6>
<label><font size="2">Clasificarán a Siguiente Fases Los de Mejor Promedio :
<select
onChange={(e) => handleChange(key2 + 1, e.target.value)}
name=""
id=""
>
<option value="seleccione">Seleccione</option>
{arraySelect2[key2].map((value, key3) => {
return (
<option value={arraySelect2[key2][key3]}>
{arraySelect2[key2][key3]} Equipos
</option>
);
})}
</select> Ubicados en la
{key2 === arraySelect.length - 1 && (
<div className="col-sm-2" style={{top:"-27px", right:"-135%"}}>
<button
type="submit"
className="btn btn-primary"
onClick={() => {
setSelect_select2(selectedNumbers[key2 + 1]);
}}
>
crear
</button>
</div>
)}
</font> </label>
</>
)}
</div>
);
})}
</div>
<div className="col-sm-2" style={{top:"-40px"}}>
{rows.map((e, index) => (
<Row
nombre={e.nombre}
index={index}
onChange={(index, value) =>
handleOnChange(index, value)
}
key={index}
/>
))}
</div>
</div>
{" "}
</font>{" "}
</label>
</font>{" "}
</label>
</>
)}
</div>
);
})}
</div>
) : (
<></>
)}
{numberIni2 && (
<input onClick={() => resetFormtodo()} type="button" value="Reiniciar" />
)}
</div>
)}
</div>
</div>
</div>
);
}
export default test;
//row2.js
const Row = (props) => {
const { onChange, onRemove, nombre, index } = props;
console.log(props);
return (
<div>
<h6> </h6>
<br/>
<br/>
<br/>
<input
disabled
value={nombre * 1 + 1 + " Posición"}
onChange={(e) => onChange(index, e.target.value)}
placeholder="Decrementar"
/>
</div>
);
};
export default Row;