my algorithm does the following:
when it starts, a select and an input appear where any value must be added after clicking on the "generate" button.
then it generates a select for me with the amount of numbers that I put in the input, then I select a number in the select that appears, then I click on the button that says "generate select".
then it generates a select and an input dynamically, and every time I select a number in the select and hit the "create" button, another select is dynamically generated with the remaining values.
What I need
I have a button called restart, what it does is delete the entire form for me and it leaves me in the part where it says "1 classified by groups" everything is fine until there, but the problem is that when selecting some value of the select it is creating me in a way automatically the other dynamic selects and what I need is that it let me select some value but for the other dynamic selects to be created I must click the "generate select" button since this is the normal sequence how the algorithm works without clicking the button restart.
how it should be "1. classified by groups"
as it should not remain "1. classified by groups"
https://codesandbox.io/s/trusting-hooks-d1d0o?file=/src/App.js:0-24403
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 = () => {
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 :
{rows.length === 1 && (
<select
onChange={(e) =>
handleChange(
0,
e.target.value
)
}
name=""
id=""
disabled={false}
>
<option value="seleccione">
Seleccione
</option>
{Array(parseInt(numberIni2))
.fill(1)
.map((value, key) => {
return (
<option
value={
numberIni2 - key
}
>
{numberIni2 - key}{" "}
Equipos
</option>
);
})}
</select>
)}
{rows.length !== 1 && (
<select
onChange={(e) =>
handleChange(
0,
e.target.value
)
}
name=""
id=""
disabled={true}
value={selectedNumbers[key2]}
>
<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
{rows.length === 1 && (
<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 :
{key2 ===
rows.length - 2 && (
<select
onChange={(e) =>
handleChange(
key2 + 1,
e.target.value
)
}
name=""
id=""
disabled={false}
>
<option value="seleccione">
Seleccione
</option>
{arraySelect2[
key2
].map(
(
value,
key3
) => {
return (
<option
value={
arraySelect2[
key2
][key3]
}
>
{
arraySelect2[
key2
][key3]
}{" "}
Equipos
</option>
);
}
)}
</select>
)}
{key2 !==
rows.length - 2 && (
<select
onChange={(e) =>
handleChange(
key2 + 1,
e.target.value
)
}
name=""
id=""
disabled={true}
value={
selectedNumbers[
key2 + 1
]
}
>
<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 ===
rows.length - 2 && (
<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
onst 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;
You have to set the states
modocuatroandmodoboton, returning them tonullagain in the functionresetFormtodo().And to get the select back to its original option, I'm going to offer you again a solution that may not be the cleanest.
What I propose is to put an ID to the select, for example we can call it
firstSelect:Then we go back to the function
resetFormtodo()and do one.getElementById()of that select.After that, I build on the answer to the following question How do I change an HTML selected option using JavaScript? to know how to change the option to the select through JavaScript and I do it that way.
So the
resetFormtodo()modified function ends up looking like this:And all the code like this: