<tbody>
<Controller
name="products"
control={control}
defaultValue={[initialProduct]}
render={({ field: { onChange, value } }) => {
return value.map(
(product: ReceiptProduct, index: number) => {
return (
<tr
key={product.id}
className="border-b border-slate-200 dark:border-slate-600"
>
<InvoiceFormReceiptInputTd
value={String(product.amount)}
label={`products[${index}].amount`}
/>
<InvoiceFormReceiptInputTd
value={product.unit}
label={`products[${index}].unit`}
/>
<InvoiceFormReceiptInputTd
value={String(product.hours)}
label={`products[${index}].hours`}
/>
<InvoiceFormReceiptInputTd
value={String(product.rate)}
label={`products[${index}].rate`}
/>
<InvoiceFormReceiptInputTd
value={String(product.price)}
label={`products[${index}].price`}
/>
<InvoiceFormRemoveRow
id={product.id}
handleRemoveRow={() => remove(index)}
/>
</tr>
)
}
)
}}
/>
</tbody>
<tbody>
<Controller
name="products"
control={control}
defaultValue={[initialProduct]}
render={({ field: { onChange, value } }) => {
return value.map(
(product: ReceiptProduct, index: number) => {
return (
<tr
key={product.id}
className="border-b border-slate-200 dark:border-slate-600"
>
<InvoiceFormReceiptInputTd
value={String(product.amount)}
label={`products[${index}].amount`}
/>
<InvoiceFormReceiptInputTd
value={product.unit}
label={`products[${index}].unit`}
/>
<InvoiceFormReceiptInputTd
value={String(product.hours)}
label={`products[${index}].hours`}
/>
<InvoiceFormReceiptInputTd
value={String(product.rate)}
label={`products[${index}].rate`}
/>
<InvoiceFormReceiptInputTd
value={String(product.price)}
label={`products[${index}].price`}
/>
<InvoiceFormRemoveRow
id={product.id}
handleRemoveRow={() => remove(index)}
/>
</tr>
)
}
)
}}
/>
</tbody>