1

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;

Edit new

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 :&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 : 
                                          <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;

1 respuesta 1

2

Esta es la manera de hacerlo que te propongo. Es la misma pero adaptada a los distintos casos.

1° CASO

Hay que condicionar si se mostrarán o no los dos botones "crear".

Para condicionar el primero, hay que verificar que arraySelect no tenga ningún otro array dentro todavía asegurándonos de que su propiedad .length sea igual a cero:

{arraySelect.length === 0 && (
    <button
        type="submit"
        className="btn btn-success"
        onClick={() => {
        setSelect(selectedNumbers[0]);
        }}
    >
        crear
    </button>
)}

Y para condicionar el segundo botón verificamos que el valor de key2, que identificará a cada botón, sea igual al .length de arraySelect menos uno. Ya que ese será el último botón:

{key2 === arraySelect.length - 1 && (
    <button
        type="submit"
        className="btn btn-success"
        onClick={() => {
        setSelect(selectedNumbers[key2 + 1]);
        }}
    >
        crear
    </button>
)}
 

Con esos cambios, todo el código quedaría así:

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>

          {console.log(arraySelect)}

          {arraySelect.length === 0 && (
            <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>

                      {key2 === arraySelect.length - 1 && (
                        <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;

Edit new

2° CASO

Hay que hacer exactamente lo mismo, pero adaptándolo un poco.

El primer botón lo condicionamos evaluando el array rows, ya que en este caso es la variable que contiene los objetos que serán renderizados.

Y esta vez la condición será que rows sea igual a 1, debido a que ya se está creando un objeto que se guarda previamente dentro de ese array:

{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>
)}

Luego en el segundo botón volvemos a utilizar nuevamente el array rows y también le hacemos otro cambio ya que en este caso siempre va a haber un objeto más en el array. Así que entonces tenemos que validar que el key2 sea igual al .length del array menos 2:

{
    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>
)}  

Finalmente, considerando que el archivo Row2.js no tendría cambios, el resto del código quedaría 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 = () => {
    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 :&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 :
                                            <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
                                            {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 :
                                                        <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 ===
                                                            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

3
  • Hola amigo , probe la solución que me envio pero no me funciona en el mi proyecto , los botones de crear se desaparecen, lo unico nuevo que tengo en mi proyecto son dos input iniciales y un campo input que aparece al lado de los selects dinamicos de resto todo es lo mismo , agregue un anexo haber si me puedes colaborar.
    – Giovanny
    el 21 nov. 2021 a las 16:01
  • Ok. Ya edité mi respuesta y le agregué cómo hay que adaptarla al 2° caso de tu pregunta. el 21 nov. 2021 a las 22:34
  • 1
    muchas gracias me sirvio la solución, tengo otro inconveniente con el mismo algoritmo pero genere una nueva pregunta es.stackoverflow.com/questions/498719/…
    – Giovanny
    el 22 nov. 2021 a las 12:23

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.