0

Lo que necesito hacer es algo sencillo, pero no me esta dando resultado. Traigo los datos de una api perfectamente guardándolos en const [operation, setOperation] = React.useState([]);. Ahora, de mi hook operation, solo necesito los datos "concept" y "amount" para mostrarlos en sus respectivos input del formulario. Mi formulario esta hecho con useForm de react-hook-form y yup para las validaciones, pero el input concept y amount quedan vacios cuando intento mostrar los datos, entonces cuando intento hacer el submit no me deja, porque al no tener declarados esos valores por defecto en el useForm, detecta que hay campos vacios. Entonces, ¿Por qué no se estan mostrando esos datos en los input?

Aca mi formulario mostrando los input vacios, y el state de operation con sus datos.

introducir la descripción de la imagen aquí

Aca el codigo:

import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import OperationsService from "./../../../services/operationsService";
import CategoryService from "./../../../services/categoryService";

const EditOperation = () => {
    
  const [operation, setOperation] = React.useState([]);

  
React.useEffect(() => {
      getOperation();   
  }, []);

// aca traigo los datos de la api
 const getOperation = () => {
    const data = operationService.getOperation(id);
    data.then((res) => {
      setOperation(res);
    }
 }

 const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
    // aca intento extraer de operation el valor de concept y amount para que queden por defecto en el formulario   
    defaultValues:{
        concept: operation.map(item => item.concept),
        amount:  operation.map(item => item.amount),
    }   
  });

const onSubmit = (formData, e) => {
     e.preventDefault();  
    // Aca Logica para editar operation
  }


  return(
  <form onSubmit={handleSubmit(onSubmit)}>
  <div className="d-flex align-items-center">
    <div className="icon">
      <FontAwesomeIcon icon={faPen} />
    </div>
    <input
      type="text"
      name="concept"
      {...register("concept")}
      placeholder="Concepto..."
      className="form-control" 
    />
  </div>

  <p className="text-center">
    <span className="small text-danger">{errors.concept?.message}</span>
  </p>

  <div className="d-flex align-items-center">
    <div className="icon">
      <FontAwesomeIcon icon={faHandHoldingUsd} />
    </div>
    <input
      type="text"
      name="amount"
      {...register("amount")}
      placeholder="Monto"
      className="form-control"  
    />
  </div>

  <p className="text-center">
    <span className="small text-danger">{errors.amount?.message}</span>
  </p>

  <div className="d-flex align-items-center">
    <div className="icon">
      <FontAwesomeIcon icon={faCalendarDay} />
    </div>
    <DataPicker
      selected={Date.parse(operation.map((item) => item.date))}
      dateFormat="dd/MM/yyyy"
      onChange={onChangeDate}
      className="form-control"
      name="date"
    />
  </div>

  <div className="d-flex align-items-center mt-3">
    <label className="text-muted">Tipo:</label>
    <select
      className="form-select"
      value={operation.map((item) => item.type)}
      onChange={(e) => {
        const selectedType = e.target.value;
        setType(selectedType);
      }}
    >
      <option value="ingreso">Ingreso</option>
      <option value="egreso">Egreso</option>
    </select>
  </div>

  <div className="d-flex align-items-center mt-3">
    <label className="text-muted">Categoria:</label>
    <select
      className="form-select"
      onChange={(e) => {
        const selectedCategory = e.target.value;
        setIdCategory(selectedCategory);
      }}
    >
      <option
        selected
        key={operation.map((item) => item.category)}
        value={operation.map((item) => item.category)}
      >
        {catName}
      </option>

      {stateCategories.map((item) => (
        <option key={item.id} value={item.id}>
          {item.name}
        </option>
      ))}
    </select>
  </div>

  <div className="d-grid gap-2">
    <button type="submit" className="btn btn-primary mt-5">
      Editar
    </button>
  </div>
</form>;
 );

}

si le pongo los valores por defecto de esta forma los muestra, pero necesito que sean los valores concept y amount de operation .

const {
    setValue,
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      concept: "concepto 1",
      amount: 800
    },
  });

introducir la descripción de la imagen aquí

0

2 respuestas 2

0

Lo solucione de esta forma: useForm ofrece un método llamado setValue("nombreInput", "value") para poder setear los valores del input.

Entonces:

  1. declaro setValue en el useForm:

 const {
    register,
    setValue,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });

  1. En la funcion getOperations() hago el setValue en los input:

const getOperation = () => {
    const data = operationService.getOperation(id);
    data.then((res) => {
      setOperation(res);
      setType(res[0].type);
      // setting default values in inputs of the form
      setValue("concept", res[0].concept);
      setValue("amount", res[0].amount);
    });
  };

0

Yo lo pude solucionar de la siguiente manera, pero claro los datos solo me iban a servir para mostar en un modal con los inputs desabilitados.

export const CustomerModal = ({ customerSelect }) => {

const form = useForm({
  mode: 'all',
});
useEffect(() => {
    form.setValue("name", customerSelect.name)
    form.setValue("lastname", customerSelect.lastname)
    form.setValue("email", customerSelect.email)
    form.setValue("telephone", customerSelect.telephone)
    form.setValue("active", true)
}, [customerSelect]);

};

De esta forma asigno por defecto los campos de los inputs correspondientes con datos que provienen de mi api pasados por props.

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.