I am trying to save the values ​​obtained in updatedRows in my given state with react-hook-form to then be able to send it to my function when submitting react-hook-form

what I do :

when a user updates the quantity in my table, then if it is greater than 0, I add it in ‘updatedRows’

if the quantity returns to 0, I remove it from this table

for the moment ‘updatedRows’ works and updates the array according to the quantities added in each row

I would now like to save them in react-hook-form

I thought of doing a ‘useEffect’, and as soon as ‘updatedRows’ changes, then I use ‘setValue’ to save the data of updatedRows in react-hook-form

The worries :

since I put ‘setValue’ in the useEffect, I have a problem with multiple rendering, it is impossible for me to update the quantities…

should I use something other than set Value?

datagrid will become a reusable component, where I pass the columns/rows as parameters.

Sometimes, this reusable datagrid will not need to save values ​​in react-hook-form and will simply be used to display data, which is why I wasn’t thinking of using useFieldArray.

This is my reusable datagrid component :

import { Box, FormLabel } from '@mui/material';
import { DataGrid } from '@mui/x-data-grid';
import React, { useCallback, useState, useEffect } from 'react';
import { useFormContext } from 'react-hook-form';

export const Datagrid = ({ infos }) => {
  const { setValue } = useFormContext();
  const [updatedRows, setUpdatedRows] = useState([]);

  
  const handleProcessRowUpdate = useCallback(
    (newRow, oldRow) => {
      console.log(newRow, oldRow);
       if (newRow.quantity !== oldRow.quantity) {
         setUpdatedRows((prevRows) => {
          const existingIndex = prevRows.findIndex(row => row.id === newRow.id);
          const newRows = [...prevRows];
          if (existingIndex > -1) {
             if (newRow.quantity > 0) {
              newRows[existingIndex] = newRow;
            } else {
               newRows.splice(existingIndex, 1);
            }
          } else if (newRow.quantity > 0) {
             newRows.push(newRow);
          }
          return newRows;
        });
        return newRow;
    
      }
      return oldRow;
    },
    []
  );
  useEffect(() => {
console.log(updatedRows)

 }, [updatedRows]);

 
 
  return (
    <Box>
      <FormLabel>{infos?.inputTitle}</FormLabel>
      {JSON.stringify(updatedRows)}
      <DataGrid
      getRowId={(row) => {
        return row?.id;
    }}
        rows={infos.rows}
        columns={infos.columns}
        processRowUpdate={handleProcessRowUpdate}
        onProcessRowUpdateError={(err) => console.log(err)}
        experimentalFeatures={{ newEditingApi: false }} 
      />
    </Box>
  );
};

export default Datagrid;

And here, my configuration, where i pass the column and rows to datagrid

export const refillSupportContractFormConfiguration = (articles, region) => {
  console.log(region, 'region');
  const updatedArticles = articles.map((article, index) => {
    const priceKey = Object.keys(article?.price).find((key) =>
      key.includes('en')
    );

    const initialPrice = article.price[priceKey];
    console.log(initialPrice);
    return {
      id: article.id || index,
       ...article,
      quantity: 0,
      initialPrice: initialPrice,
    };
  });

  return {
    'S. refill plan': {
      title: 'Support refill plan',
      InputFields: [
        {
          inputType: 'array',
          inputTitle: 'Select the desired Refill plan and the quantity',
          rows: updatedArticles,
          columns: [
            {
              field: 'name',
              headerName: 'Package',
              flex: 1,
            },
            {
              field: 'quantity',
              headerName: 'Quantité',
              type: 'number',
              flex: 1,
              editable: true,
            },
            {
              field: 'initialPrice',
              headerName: 'Initial price',
              type: 'number',
              width: 120,
              valueGetter: (params) =>
                params?.row?.quantity * params?.row?.initialPrice,
              renderCell: (params) =>
                params?.row?.quantity * params?.row?.initialPrice,
            },
          ],
          register: 'supportContract.refill',
        },
      ],
    },
  };
};

It’s the first time since the new MAJ that I am using processRowUpdate from mui and datagrid. Maybe the mistake is from here ?

I also already try to not use ‘useState’ and to directly use setValue in processRowUpdate but I got the same probleme.