issue: i want to calculate row data i will give quantity & price should calculate subtotal

[NarenderDhamarlapally]

Version Number

7.14.1

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-v7-form-context-forked-7t7dfp?file=/src/index.js

Steps to reproduce

1. Go to 'codesandbox'
2. but it is rendering multiple loops why because of usewatch
3. Click on quantity and price should populate subtotal data
4. See error

Expected behaviour

when quantity and price enter should populate subtotal data
and also add

// (prevProps, nextProps) =>
// prevProps.formState.isDirty === nextProps.formState.isDirty

please add this is Test component.
prevProps.formState is getting undefined
nextProps.formState is getting undefined

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[NarenderDhamarlapally]

bill please help me for this .
this is the main part of my application calculation

[mutasim77]

This line is causing a re-render of the component, and it's becoming an infinite loop:

setValue(`lineItems[${index}][subtotal]`, output);

To fix this issue, you can use the useEffect hook to update the value after the component has rendered:

import React, { useEffect } from "react";
import { useWatch } from "react-hook-form";

export const Calc = ({ control, setValue, index }) => {
  const results = useWatch({ control, name: `lineItems[${index}]` });

  const output = results?.quantity * results.price;

  useEffect(() => {
    setValue(`lineItems[${index}].subtotal`, output);
  }, [index, output, setValue]);

  return <p>{output}</p>;
};

[NarenderDhamarlapally]

https://codesandbox.io/s/react-hook-form-v7-form-context-forked-c9lpvw?file=/src/Calc.js

first time data is coming from next time data is not changed