0

Tengo un select dinamico que se crea a partir del valor que se agrega en un input, por ejemplo si en el input agrego el valor de 4 entonces se me genera un select con los numeros del 1 al 4 y si selecciono por ejemplo en el select el valor del 1 se me carga otro select dinámico con el resto de números del 2 al 4 y así hasta quedar solo el valor del 4. Ahora lo que necesito es que haga lo contrario si agrego en el input el valor del 4 entonces en el select me va a cargar los valores del 4 al 1 y si selecciono el numero 4 entonces me cargue en otro select los números del 3 hasta 1 y así consecutivamente hasta solo quedar el valor del 1.

https://codesandbox.io/s/frosty-dawn-c55ux?file=/src/App.js

1 respuesta 1

0

Creo que estás sobre complicándote, si solo necesitas un select con el número de elementos especificado por un número máximo, entonces la única información relevante (que define el estado de tu elemento) son simplemente el tamaño y el orden, simplifiqué el código para proveer una solución tal y como la describes:

import React, { useState } from "react";

const Test = () => {

  //Necesitamos conocer el tamaño del array
  const [size, setSize] = useState(0);
  //Necesitamos conocer si el array es ascendente o descendente
  const [reversed, setReversed] = useState(false);

  const buildSelectArray = () => {

    //Creamos un array del tamaño de size y lo llenamos de ceros
    //Utilizamos map para generar un array con las opciones que queremos
    //Es importante utilizar el prop keys para elementos autogenerados
    //De lo contrario tu código podría comportarse de maneras inesperadas
    //Utilzo una función ternaria para poder decidir el orden del array
    return Array(size)
      .fill(0)
      .map((el, index) => (
        <option
          key={`select${reversed ? size - index : index}`}
          value={reversed ? size - index : index + 1}
        >
          {reversed ? size - index : index + 1}
        </option>
      ));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    //Al especificar el tamaÑo seteamos el estado size de tu componente
    setSize(Number(event.target.numberIni.value));
  };
  const resetForm = () => {
    //Al resetear el tamaño de tu componente hacemos size 0
    setSize(0);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input name="numberIni" type="number" />
        <input type="submit" value="Generar select" />
      </form>
      {
        /* Evaluamos si size es mayor que cero para hacer el display de las opciones */
        size > 0 && (
        <select name="" id="">
          {buildSelectArray()}
        </select>
      )}

      {size > 0 && (
        <input onClick={() => resetForm()} type="button" value="Reiniciar" />
      )}

      <button
        type="button"
        onClick={() => {
          /* Si los acomodamos al reves entonces cambiamos el estado que nos ayuda con el orden*/
          setReversed(!reversed);
        }}
      >
        Reverse
      </button>
    </div>
  );
};

export default Test;
1
  • hola amigo, revise el código que me enviaste pero no hace lo que necesito , lo que necesito es que haga lo contrario ejemplo en el input hay un 4 y se genera en el select en este orden 4, 3, 2, 1 entonces selecciono el numero 3 y debe crearse otro select desde el 2 hasta el 1 y asi hasta llegar al 1
    – Giovanny
    el 22 sep. 2021 a las 1: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.