1

No he podido lograr crear una división entre un campo input y un campo select. El algoritmo lo que hace es cuando coloco un numero en el input1 me genera en el select los divisores de dicho numero ahora lo que necesito es que me divida lo que hay en el input1 con el valor que seleccione en el select en otro input nuevo
He intentado de varias formas pero no he podido lograr la división de estos dos campos el input uno con el select

import { useState } from 'react'


export default function Pruebas() {

  const [number, setNumber] = useState({input: 0, two: 0})
  const [division, setDivision] = useState()

  const [input, setInput] = useState()
    const [values, setValues] = useState([])

    const handleClick = event => {
        event.preventDefault()
        setValues([+input, ...values])
    }


  const useEffect1= ()=>{
    const { input, two} = number
    setDivision(Number(input) / Number(two))
  }

  const handleInput = (event) => {
    const { name, value } = event.target
    setNumber({...number, [name]: value})
  }

  return (
    <div className="App">
      <input placeholder='Ingrese divisor' value={input} onChange={event => setInput(event.target.value)} />
      <button onClick={handleClick}>Agregar divisor</button>

      
      <br /><br />

      <select name='two' class='form-control'>
                <option value='no' selected>
                    Select
                </option>
                {values.map((item, index) => (
                    <option key={index} value={item}>
                        {item - 1}
                    </option>
                ))}
            </select>
      
      <br />
      
      <button onClick={useEffect1}>dividir</button>
      <input value={division}  placeholder="Resultado división" readOnly/>

     
    </div>
  );
}

1 respuesta 1

1

Le faltarían algunos cambios a tu código.

Primero, dentro de la función useEffect1, no estás trayendo los datos del primer input correctamente. Los datos de ahí ya estaban justamente en el estado input.

Después, yo no haría la división dentro del setDivision().

Más bien realizaría la división afuera y el resultado sería lo que setearía.

const useEffect1 = () => {
    const { two } = number;
    let inputValue = parseInt(input);
    let twoValue = parseInt(two);
    let result = inputValue / twoValue;
    setDivision(result);
  };

El otro cambio que haría sería la forma de capturar los datos del select.

Se le puede agregar un evento onChange y llamar a la función handleInput

<select name="two" class="form-control" onChange={handleInput}>

De esa forma recuperamos los datos del <select> y los guardamos en el estado.

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

import { useState } from 'react'


export default function Pruebas() {

  const [number, setNumber] = useState({input: 0, two: 0})
  const [division, setDivision] = useState()

  const [input, setInput] = useState()
    const [values, setValues] = useState([])

    const handleClick = event => {
        event.preventDefault()
        console.log(+input)
        console.log(input)
        setValues([+input, ...values])
    }


  const useEffect1= ()=>{
    const { two } = number
    let inputValue = parseInt(input)
    let twoValue = parseInt(two)
    let result = inputValue / twoValue
    setDivision(result)
  }

  const handleInput = (event) => {
    const { name, value } = event.target
    console.log(event.target)
    console.log(name)
    console.log(value)
    setNumber({...number, [name]: value})
  }

  return (
    <div className="App">
      <input placeholder='Ingrese divisor' value={input} onChange={event => setInput(event.target.value)} />
      <button onClick={handleClick}>Agregar divisor</button>

      
      <br /><br />

      <select name='two' class='form-control' onChange={handleInput}>
                <option value='no' selected>
                    Select
                </option>
                {values.map((item, index) => (
                    <option key={index} value={item - 1}>
                        {item - 1}
                    </option>
                ))}
            </select>
      
      <br />
      
      <button onClick={useEffect1}>dividir</button>
      <input value={division}  placeholder="Resultado división" readOnly/>

     
    </div>
  );
}

Edit new

Puedes probarlo en SandBox y verificar si hace lo que estabas buscando.

PD: Te recomiendo que elijas nombres un poco más intuitivos para tus funciones y objetos. Los nombres useEffect1 y también input son muy genéricos y no describen muy bien el propósito para lo que se usan.

2
  • 1
    Muchas gracias me sirvo la división.
    – Giovanny
    el 20 sep. 2021 a las 11:58
  • Genial. No olvides marcar una respuesta como "aceptada" si realmente te sirvió, aquí se explica cómo hacerlo. Hacer eso ayuda a otras personas que tengan tu mismo problema a reconocer una respuesta útil . el 20 sep. 2021 a las 12:41

Tu Respuesta

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

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