0

tengo un select en reactjs que me trae una lista de mi api sin problemas pero necesito que al seleccionar un registro de mi select el valor "documento" que trae el registro me lo me lo muestre en un input:

https://codesandbox.io/s/quizzical-jasper-6j6rvl?file=/src/App.js:0-1020

este es el código que tengo pero no he logrado mostrar el valor del "documento" en un input:

import React, { useState, useEffect } from "react";

function App() {
  const [t4t, setUniversidad] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      const getcountry2 = async () => {
        const req = await fetch(
          `https://aliraweb.com/apiAlira2/cargar_empleados/nombre_trabajador.php?id_empresa_usuario=30`
        );
        const getres2 = await req.json();
        setUniversidad(await getres2);
      };
      getcountry2();
    }, 2000);
    return () => setInterval(interval);
  }, []);

  return (
    <div className="App">
      <select
        // name="t4"
        className="form-select"
      >
        <option>--Seleccione --</option>
        {t4t.map((getcon2) => (
          <option key={getcon2.id} value={getcon2.name}>
            {" "}
            {getcon2.documento} - {getcon2.name}{" "}
          </option>
        ))}
      </select>

      <br />
      {/*  <input type="text"  value={getcon2.documento} />*/}
    </div>
  );
}

export default App;

1 respuesta 1

1

Estas usando un await de mas.

Una vez llamada a la api (resultado = await fetch('...')), y pasado el resultado a json (resultado = await resultado.json()) ya no hay mas llamadas asíncronas que hacer por lo que el await no es necesario, 'getres2' no devuelve una Promesa por lo que no tiene sentido poner setUniversidad(await getres2);. Elimina ese await.

Después para pasar el valor del <SELECT> a los inputs debes pasar a la propiedad value del option no solo getCon2.nombre, sino getCon2.nombre + getCon2.documento para poder manejar ambos valores mas tarde tal que asi:

 <option
   key={getcon2.id}
   value={`${getcon2.documento}-${getcon2.name}`}
  >

Estableces 2 referencias para los inputs con el hook useRef:

const nombre_input = useRef();
const documento_input = useRef();

Para que esas referencias apunten a los inputs (inicialmente no apuntan a nada) debes definir los inputs con su propiedad ref y colocando las referencias como su valor:

<input ref={nombre_input} type="text"></input>
<input ref={documento_input} type="text"></input>

Defines una función que se ejecutara cada vez que el <SELECT> cambie de valor, validando primero que ese valor no este vacío ni que sea '--Seleccione --' para luego tomar ese valor, dividir la cadena en 2 y pasar una mitad a un input y la otra mitad al otro usando las referencias:

  const handleChange = (e) => {
    if (e.target.value && e.target.value !== "--Seleccione --") {
      const [documento, name] = e.target.value.split("-");
      nombre_input.current.value = name;
      documento_input.current.value = documento;
    }
  };

Finalmente solo te queda pasar esa función al evento onChange del <SELECT>:

<select onChange={handleChange} className="form-select">

Puedes ver y probar el código final aqui.

6
  • muchas gracias por la observación, pero me puedes ayudar con la pregunta que realice en este post.
    – Giovanny
    el 8 jul. a las 15:05
  • @Giovanny si disculpa ahi modifico la respuesta el 8 jul. a las 15:07
  • pregunto si tuviera otro input donde el primero aparezca el documento y el segundo el nombre en el momento de seleccionar el registro en el select como seria?
    – Giovanny
    el 8 jul. a las 15:25
  • la solución que diste tiene un problema y es con los espacios, por ejemplo si coloco primero el nombre en la constante y luego el documento en los campos input me va aparecer en el primer input el nombre y en el segundo input el primer apellido y no el documento , ya que el nombre lleva aparte del nombre primer y segundo apellido separado por un espacio.
    – Giovanny
    el 8 jul. a las 16:13
  • 1
    @Giovanny ahi divide el documento en un campo y el nombre y el apellido en otro, eso despues lo administras como quieres creo que se entiende mas o menos la idea. el 8 jul. a las 16:18

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.