0

Tengo un select que me muestra los divisores de 20 de forma fija, lo que necesito es que si agrego un valor en un input dinámicamente me salga en el select los divisores para seleccionar, por ejemplo si agrego en el input el valor de 20 en el select me debe aparecer de forma dinámica para seleccionar 1, 2, 5, 10, 20 que serian los divisores de 20.

function pruebas() {
    return (
        <div>

  <input type="number" placeholder=" Ingresa el divisor de" />
   <br/>          

<select name="tipo_cancha" class="form-control" >
<option value='no' selected>Divisor de 20</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="20">20</option>
  
</select> 
            
        </div>
    )
}

export default pruebas

2
  • Y tu código JavaScript? el 25 ago. 2021 a las 13:18
  • ese es el código que tengo en reactjs y no encuentro como crear lo que comente..
    – Giovanny
    el 25 ago. 2021 a las 13:25

1 respuesta 1

1

Lo que deberías hacer es controlar el valor ingresado en el input, y mediante ese valor, obtener el mod de tu número siempre y cuando el residuo sea cero, o lo equivalente, que la división sea exacta.

export default function App() {
   const [input, setInput] = useState()
   const [values, setValues] = useState([])

   const getMods = number => {
      let aux = []
      for (let x = 1; x <= number; x++) {
         if (number % x === 0) {
            aux.push(x)
         }
      }
      return aux
   }

   const handleClick = () => {
      if (+input > 0) {
         const mods = getMods(+input)
         setValues(mods)
      }
      setInput('')
   }

   return (
      <>
         <input placeholder='Ingrese divisor' value={input} onChange={event => setInput(event.target.value)} />
         <button onClick={handleClick}>Agregar divisor</button>
         <hr />
         <br />
         <select name='tipo_cancha' class='form-control'>
            <option value='no' selected>
                Divisor de 20
            </option>
            {values.map((item, index) => (
               <option key={index} value={item}>
                  {item}
               </option>
            ))}
         </select>
      </>
 )}

Acá te dejo el ejemplo completo para que lo revises y pruebes.

Nos comentas si te sirvió o si tienes alguna duda.

8
  • no esta funcionando como lo necesito, osea por ejemplo cuando ingrese un valor en el input por ejemplo 20 en el select me debe de cargar todos los divisores de 20 que serian 20,10,5,4,2,1 .
    – Giovanny
    el 25 ago. 2021 a las 14:41
  • Si me puedes colaborar te encargo la verdad no he podido..
    – Giovanny
    el 25 ago. 2021 a las 17:24
  • @Giovanny editada! el 25 ago. 2021 a las 18:51
  • muchas gracias me sirvio, pero tengo una ultima duda por ejemplo si no quiero que el numero de coloco en el input no muestre que es divisor por si mismo por ejemplo: divisor de 20 es : 20,10,5,4,2,1 y no quiero que aparezca el 20 en el select como seria ?
    – Giovanny
    el 25 ago. 2021 a las 19:50
  • Simplemente, cambia const mods = getMods(+input).filter(x => x !== +input) y listo! Recuerda que si la respuesta fue óptima, marcarla como correcta ;) el 25 ago. 2021 a las 19:53

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.