2

mi algoritmo hace lo siguiente:

cuando se inicia aparece un select y un input donde se deben agregar cualquier valor luego de darle en el boton "generar".

despues me genera un select con la cantidad de numeros que coloque en el input, luego selecciono algún numero en el select que me aparece, luego le doy al boton que dice "generar select".

despues me genera un select y un input de forma dinamica , y cada vez que selecciono un numero en el select y le doy al boton "crear" se me genera otro select de forma dinamica con los valores restantes.

Lo que necesito

tengo un boton que se llama reiniciar lo que hace es borrarme todo el formulario y me deja en la parte donde dice "1 clasificados por grupos" todo bien hasta ahi, pero el problema es que al seleccionar algún valor del select me esta creando de forma automática los otros selects dinamicos y lo que necesito es que me deje seleccionar algun valor pero para que se creen los otros select dinamicos deba darle clic al botón "generar select" ya que esta es la secuencia normal como funciona el algoritmo sin darle clic al boton reiniciar.

como debe quedar "1. clasificados por grupos" introducir la descripción de la imagen aquí

como no debe quedar "1. clasificados por grupos" introducir la descripción de la imagen aquí

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 :&nbsp;{" "}
                </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">&nbsp;Equipos De Cada Grupo </font>{" "}
              </label>

              <label>
                <font size="2">
                  {" "}
                  &nbsp;{" "}
                  {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">
                                  &nbsp; &nbsp;
                                  <label>
                                    <font size="2">
                                      {" "}
                                      &nbsp;{" "}
                                      <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;

1 respuesta 1

1
+50

Hay que setear los estados modocuatro y modoboton, volviéndolos a null otra vez en la función resetFormtodo().

Y para lograr que el select vuelva a su opción original, voy a ofrecerte otra vez una solución que quizás no sea la más limpia.

Lo que propongo es ponerle un ID al select, por ejemplo podemos llamarlo firstSelect:

 <select id="firstSelect" onChange={handleInput_division2} name="numberIni3">

Luego volvemos a la función resetFormtodo() y hacemos un .getElementById() de ese select.

Después de eso, me baso en la respuesta a la siguiente pregunta How do I change an HTML selected option using JavaScript? para saber cómo cambiarle la opción al select mendiante JavaScript y lo hago de esa forma.

Entonces la función resetFormtodo() modificada me termina quedando así:

const resetFormtodo = () => {
    setRows([]);
    setarraySelect([]);
    setarraySelect2([]);
    setModoCuatro(null)
    setModoBoton(null)
    document.getElementById("firstSelect").getElementsByTagName('option')[0].selected = 'selected'
  };

Y todo el código así:

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([]);
    setModoCuatro(null)
    setModoBoton(null)
    document.getElementById("firstSelect").getElementsByTagName('option')[0].selected = 'selected'
  };

  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 :&nbsp;{" "}
                </font>
              </label>
              <select id="firstSelect" 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">&nbsp;Equipos De Cada Grupo </font>{" "}
              </label>

              <label>
                <font size="2">
                  {" "}
                  &nbsp;{" "}
                  {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">
                                  &nbsp; &nbsp;
                                  <label>
                                    <font size="2">
                                      {" "}
                                      &nbsp;{" "}
                                      <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;

Edit new

2
  • faltaria un detalle, cuando se reinicia el select esta quedando con el numero y la idea es que tambien quede limpio.
    – Giovanny
    Commented el 27 nov. 2021 a las 22:10
  • Perdón. No me había fijado en ese detalle de la pregunta. Ya modifiqué mi respuesta para arreglar ese problema. Avisame si le falta alguna otra cosa más. Commented el 27 nov. 2021 a las 22:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.