title: How to make a form for add and edit with Reack-hook-form
body: <p>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).</p>
  <p>The form works perfectly to create a product but how to make it able to edit a product?</p>
  <p>I tried to pass my values via &quot;value&quot; or &quot;defaultValue&quot; 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</p>
  <p>All this to create a basic CRUD.</p>
  <p>Here is my form, I use Material-UI for the form elements, especially for its modal</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    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 () =&gt; {
      const res = await fetch(`${ENDPOINT}/api/produits`);
      const data = await res.json();
      setProduits(data);
    };
  
    // create new product.
    const onSubmit = async (data) =&gt; {
      const re = await axios.post(`${ENDPOINT}/api/produits`, data, {
        headers: { 'Content-Type': 'application/json'}
      })
      setProduits([...Produits, data])
    };
  
    // edit product.
    const onSubmitUpdate = async (data) =&gt; {
      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) =&gt; {
      setOpenSuppr({open: false, produitId: data});
      const re = await axios.delete(`${ENDPOINT}/api/produits/${data}`, data, {
        headers: { 'Content-Type': 'application/json'}
      })
      setProduits(prevState =&gt; {
        prevState.filter(Produits =&gt; {
          return Produits.pro_id !== data;
        })
      });
    }
  
    // -- Handler open / close Dialogs
    // Handlers des Dialogs
    const handleAjout = (Bool) =&gt; {
      setOpenAjout(Bool);
    };
  
    const handleModif = (Bool, Produit) =&gt; {
      setOpenModif({open: Bool, produit: Produit});
    };
  
    const handleSuppr = (Bool, ProduitID) =&gt; {
      setOpenSuppr({open: Bool, produitId: ProduitID});
    };
  
  
    // Rendering
    useEffect(() =&gt; {
      Chargement();
    }, []);
  
    return (
      &lt;div&gt;
        &lt;TableContainer component={Paper}&gt;
          &lt;Table&gt;
            &lt;TableHead&gt;
              &lt;TableRow style={{ background: "#cad2c5" }}&gt;
                &lt;TableCell align="center"&gt;{"ID"}&lt;/TableCell&gt;
                &lt;TableCell align="center"&gt;{"Nom"}&lt;/TableCell&gt;
                &lt;TableCell align="center"&gt;{"Description"}&lt;/TableCell&gt;
                &lt;TableCell align="center"&gt;{"Instruction"}&lt;/TableCell&gt;
                &lt;TableCell align="center"&gt;{"Prix"}&lt;/TableCell&gt;
                &lt;TableCell align="center"&gt;{"Action"}&lt;/TableCell&gt;
              &lt;/TableRow&gt;
            &lt;/TableHead&gt;
            &lt;TableBody&gt;
              {Produits?.map((produit) =&gt; (
                &lt;TableRow key={`PRO_${produit.pro_id}`}&gt;
                  &lt;TableCell align="center"&gt;{produit.pro_id}&lt;/TableCell&gt;
                  &lt;TableCell align="center"&gt;{produit.pro_nom}&lt;/TableCell&gt;
                  &lt;TableCell align="center"&gt;{produit.pro_description}&lt;/TableCell&gt;
                  &lt;TableCell align="center"&gt;{produit.pro_instruction}&lt;/TableCell&gt;
                  &lt;TableCell align="center"&gt;{produit.pro_prix}{' €'}&lt;/TableCell&gt;
                  &lt;TableCell align="center"&gt;
                    &lt;Tooltip title="Modifier" placement="top"&gt;
                      &lt;IconButton
                        style={{
                          background: "#ffca3a",
                          color: "white",
                          borderRadius: "10%",
                        }}
                        onClick={() =&gt; handleModif(true, produit)}
                      &gt;
                        &lt;EditIcon /&gt;
                      &lt;/IconButton&gt;
                    &lt;/Tooltip&gt;
                    &lt;Tooltip title="Supprimer" placement="top"&gt;
                      &lt;IconButton
                        style={{
                          background: "#ff595e",
                          color: "white",
                          borderRadius: "10%",
                        }}
                        onClick={() =&gt; handleSuppr(true, produit.pro_id)}
                      &gt;
                        &lt;DeleteIcon /&gt;
                      &lt;/IconButton&gt;
                    &lt;/Tooltip&gt;
                  &lt;/TableCell&gt;
                &lt;/TableRow&gt;
              ))}
            &lt;/TableBody&gt;
          &lt;/Table&gt;
        &lt;/TableContainer&gt;
  
        &lt;Grid&gt;
          &lt;Button
            variant="contained"
            endIcon={&lt;AddIcon /&gt;}
            onClick={() =&gt; handleAjout(true)}
          &gt;
            {"Ajouter"}
          &lt;/Button&gt;
  
          {/**
           * Dialog add product
           */}
          &lt;Dialog open={openAjout} onClose={() =&gt; handleAjout(false)}&gt;
            &lt;DialogTitle&gt;{"Ajout d'un produit"}&lt;/DialogTitle&gt;
            &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
              &lt;DialogContent&gt;
                &lt;TextField
                  type={"text"}
                  name="pro_nom"
                  {...register("pro_nom", { required: true })}
                  label="Nom"
                  placeholder="Hamburger"
                  autoFocus
                  variant="outlined"
                /&gt;
                {errors.pro_nom &amp;&amp; &lt;span&gt;Champ requis.&lt;/span&gt;}
  
                &lt;TextField
                  type={"text"}
                  name="pro_description"
                  {...register("pro_description", { required: true })}
                  label="Description"
                  placeholder="Description du produit"
                  variant="outlined"
                /&gt;
                {errors.pro_description &amp;&amp; &lt;span&gt;Champ requis.&lt;/span&gt;}
  
                &lt;TextField
                  type={"text"}
                  name="pro_instruction"
                  {...register("pro_instruction")}
                  label="Instruction"
                  placeholder="Instruction particulière"
                  variant="outlined"
                /&gt;
  
                &lt;TextField
                  type={"number"}
                  name="pro_prix"
                  {...register("pro_prix", { required: true, min: 0,  valueAsNumber: true })}
                  label="Prix"
                  placeholder="Obligatoire"
                  variant="outlined"
                /&gt;
                {errors.pro_prix &amp;&amp; &lt;span&gt;Champ requis.&lt;/span&gt;}
              &lt;/DialogContent&gt;
              &lt;DialogActions&gt;
                &lt;Button type="reset"&gt;{"Effacer"}&lt;/Button&gt;
                &lt;Button onClick={() =&gt; handleAjout(false)}&gt;{"Fermer"}&lt;/Button&gt;
                &lt;Button type="submit"&gt;{"Confirmer"}&lt;/Button&gt;
              &lt;/DialogActions&gt;
            &lt;/form&gt;
          &lt;/Dialog&gt;</code></pre>
  </div>
  </div>
  </p>