Updating input value from two other inputs

[TitoSniberb]

Hello, I'm trying to change the value of one of my inputs depending on what the user types in another two inputs. My problem is that it only updates after losing focus of the input. It's a me problem and not the library but I just do not know how to solve it. Any help would be highly appreciated

This is the code:

<div>
<div>
            <label>Nombre local</label>
            <InputPrimary
              register={register}
              label="betLocal"
              onChange={() =>
                setValue(
                  'betEventName',
                  `${watch('betLocal') ? watch('betLocal').trim() : 'Local'} vs ${
                    watch('betVisitor') ? watch('betVisitor').trim() : 'Visitante'
                  }`
                )
              }
            />
          </div>

            <label>Nombre visitante</label>
            <InputPrimary
              register={register}
              label="betVisitor"
              onChange={() =>
                setValue(
                  'betEventName',
                  `${watch('betLocal') ? watch('betLocal').trim() : 'Local'} vs ${
                    watch('betVisitor') ? watch('betVisitor').trim() : 'Visitante'
                  }`
                )
              }
            />
          </div>

          <div>
            <label>Evento</label>
            <InputPrimary
              register={register}
              label="betEventName"
              value={watch('betEventName')}
            />
          </div>

And this is the InputPrimary component:

<input
            type={type}
            disabled={disabled}
            placeholder={placeholder}
            {...register(label, {
              required,
              minLength,
              maxLength,
              pattern,
            })}
            className={`transform duration-300 w-full ${error && 'error'}`}
            style={inputStyle}
            autoComplete="off"
            onChange={(e) => onChange && onChange(e)}
            value={value}
          />

[Moshyfawn]

For dependent value fields you should use controlled inputs as you're literally control an input value with another input.

With uncontrolled input, you don't get re-renders as the source of truth for the form field's value is the actual input. And you want the field values to be reactive.

As you've mentioned that your value is been updated only on un-focus (blur), it means that there's some form logic that makes the form re-render onBlur or something along these lines (it's hard to tell without a repro example). So, at the of the day, it's the controlled vs uncontrolled input approach where you deviated a bit from the "right" solution