Why create a new signal in a Field for Monetary amounts?

[qingzhoufeihu]

What are the differences between the two versions of the code below?

<Field
  name="price"
  type="number"
  transform={toCustom((value) => value && value * 100, {
    on: 'change',
  })}
>
  {(field, props) => {
    const value = useSignal<string | number>('');
    useSignalEffect(() => {
      if (!Number.isNaN(field.value.value)) {
        input.value =
          field.value.value === undefined ? '' : field.value.value / 100;
      }
    });
    return <input {...props} type="number" value={value.value} />;
  }}
</Field>

<Field
  name="price"
  type="number"
  transform={toCustom((value) => value && value * 100, {
    on: 'change',
  })}
>
  {(field, props) => {
    return <input {...props} type="number" value={field.value.value === undefined ? '' : field.value.value / 100} />;
  }}
</Field>

[fabian-hiller]

The first code example keeps incomplete or invalid numeric input such as 234. as the state of the <input /> field, while the second code example resets it to an empty input. It is important to note that the behavior of frameworks may be different and this code example is likely ported from our SolidJS docs.

[qingzhoufeihu]

The first code example keeps incomplete or invalid numeric input such as 234. as the state of the <input /> field, while the second code example resets it to an empty input. It is important to note that the behavior of frameworks may be different and this code example is likely ported from our SolidJS docs.

It comes from react doc in modular form

[fabian-hiller]

Yeah, I know. What I meant is that I originally wrote it for SolidJS and just copied it over to the React docs. Maybe the behavior of React is different here.