How to make a form for add and edit with Reack-hook-form

Question

I am trying to create a single form able to manage the creation of a product but also to edit it (by passing the values through an object).

The form works perfectly to create a product but how to make it able to edit a product?

I tried to pass my values via "value" or "defaultValue" but it seems to be a problem with the creation of a product (The values are as saved) The idea of creating a second form with default values passed in doesn't seem right

All this to create a basic CRUD.

Here is my form, I use Material-UI for the form elements, especially for its modal

    export default function App() {
  // ReactHookForm
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();


  
  const [Produits, setProduits] = useState([]);

  
  const [openAjout, setOpenAjout] = useState(false);
  const [openModif, setOpenModif] = useState({open: false, produit: null});
  const [openSuppr, setOpenSuppr] = useState({open: false, produitId: null});

  // Load product.
  const Chargement = async () => {
    const res = await fetch(`${ENDPOINT}/api/produits`);
    const data = await res.json();
    setProduits(data);
  };

  // create new product.
  const onSubmit = async (data) => {
    const re = await axios.post(`${ENDPOINT}/api/produits`, data, {
      headers: { 'Content-Type': 'application/json'}
    })
    setProduits([...Produits, data])
  };

  // edit product.
  const onSubmitUpdate = async (data) => {
    console.log('data', data)
    // const re = await axios.put(`${ENDPOINT}/api/produits/${data}`, data, {
    //   headers: { 'Content-Type': 'application/json'}
    // })
  };

  // delete product.
  const confirmSuppr = async (data) => {
    setOpenSuppr({open: false, produitId: data});
    const re = await axios.delete(`${ENDPOINT}/api/produits/${data}`, data, {
      headers: { 'Content-Type': 'application/json'}
    })
    setProduits(prevState => {
      prevState.filter(Produits => {
        return Produits.pro_id !== data;
      })
    });
  }

  // -- Handler open / close Dialogs
  // Handlers des Dialogs
  const handleAjout = (Bool) => {
    setOpenAjout(Bool);
  };

  const handleModif = (Bool, Produit) => {
    setOpenModif({open: Bool, produit: Produit});
  };

  const handleSuppr = (Bool, ProduitID) => {
    setOpenSuppr({open: Bool, produitId: ProduitID});
  };


  // Rendering
  useEffect(() => {
    Chargement();
  }, []);

  return (
    
      
        
            
              {"ID"}
              {"Nom"}
              {"Description"}
              {"Instruction"}
              {"Prix"}
              {"Action"}
            
          
            {Produits?.map((produit) => (
              
                {produit.pro_id}
                {produit.pro_nom}
                {produit.pro_description}
                {produit.pro_instruction}
                {produit.pro_prix}{' €'}
                
                  
                     handleModif(true, produit)}
                    >
                      
                    
                  
                  
                     handleSuppr(true, produit.pro_id)}
                    >
                      
                    
                  
                
              
            ))}
          
          
          
        
      

      
        

        {/**
         * Dialog add product
         */}
         handleAjout(false)}>
          {"Ajout d'un produit"}
          
            
              
              {errors.pro_nom && Champ requis.}

              
              {errors.pro_description && Champ requis.}

              

              
              {errors.pro_prix && Champ requis.}

Med El Mobarik · Answer

There is a usefule function in react-hook-form called reset. It allows you to predefine the values for the form. Click here to see the documentation.

You just need to call it inside the useEffect hook and specify the fields. But before that you need to specify a state to check if it is an "add" or "edit" action.

const [action, setAction] = useState();

useEffect(() => {
  if(action == "edit"){
    reset({
      pro_description: "pro_description",
      pro_instruction: "pro_instruction"
    })
  }else if(action == "add"){
    reset({
      pro_description: "",
      pro_instruction: ""
    })
  }
  
}, [reset, action])

How to make a form for add and edit with Reack-hook-form

1 Answers