React projemde react-hook-form kütüphanesi kullanarak dinamik form
yapısında farklı dövizlere göre fiyat hesaplama sistemi geliştirdim.

Bunun devamında dövizleri kendi aralarında toplamak istiyorum. Burada tıkandım 3 gündür ve ilerleme kaydedemedim.

const watchTest = useWatch({
  control,
  name: "type_of_transports_details",
});

const setTotal = (i, count, price, currency) => {
  const amount = count * price;
  if (currency) {
    setValue(`type_of_transports_details[${i}].unit_format_total`,amount + " " + currency);
    setValue(`type_of_transports_details[${i}].unit_total`, amount);
  }
};

<Controller
  name={`type_of_transports_details.${index}.unit_count`}
  control={control}
  defaultValue={field.unit_count}
  render={({ field: { onChange, value } }) => (
    <input
      type="number"
      placeholder="Taşıma Sayısı"
      value={value}
      onChange={(e) => {
        const count = e.target.value;
        setTotal(
          index,
          count,
          watchTest[index].unit_price,
          watchTest[index]?.unit_currency_name?.label
        );
        onChange(count);
      }}
    />
  )}
/>;

<Controller
  control={control}
  name={`type_of_transports_details.${index}.unit_currency_name`}
  render={({ field: { onChange, ref, value } }) => (
    <Select
      styles={customStyles}
      value={value}
      noOptionsMessage={() => "Aramanıza uygun değer bulunamadı"}
      options={optionDoviz}
      classNamePrefix="select"
      placeholder={"Döviz Türü Seçiniz"}
      ref={ref}
      onChange={(e) => {
        const currency = e.label;
        setTotal(
          index,
          watchTest[index].unit_count,
          watchTest[index].unit_price,
          currency
        );
        setValue(
          `type_of_transports_details.${index}.unit_currency_value`,
          number.doviz.items[0][e.value]
        );
        onChange(e);
      }}
    />
  )}
/>;

<Controller
  name={`type_of_transports_details.${index}.unit_price`}
  control={control}
  defaultValue={field.unit_price}
  render={({ field: { onChange, value } }) => (
    <input
      type="number"
      placeholder="Fiyat"
      value={value}
      onChange={(e) => {
        const price = e.target.value;
        setTotal(
          index,
          watchTest[index].unit_count,
          price,
          watchTest[index]?.unit_currency_name?.label
        );
        onChange(price);
      }}
    />
  )}
/>;

<input
  type="text"
  readOnly={true}
  placeholder="Toplam"
  {...register(`type_of_transports_details.${index}.unit_format_total`)}
/>;

Form görüntüm

Çıktımın "16 USD + 384 EUR" şeklinde olmasını istiyorum.