Best Practices for Unrepresentable Intermediate State

Hello,
I am looking for some opinions regarding best practice in the following situation.

Lets say I have a model which contains properties and some of those properties can only exist in tandem e.g. blood pressure which are usually two values. To encode this in the model the two properties are grouped into an optional property.

interface SomeModel {
  a: string;
  b?: {
    b1: string;
    b2: string;
  };
}

interface SomeModel {
  a: string;
  b?: {
    b1: string;
    b2: string;
  };
}

If I want to create a custom component which can be used to create such a model instance, I want to have three input elements. The component props would look like this:

interface SomeComponentProps {
  value: SomeModel;
  onChange: (value: SomeModel | undefined) => void;
}

interface SomeComponentProps {
  value: SomeModel;
  onChange: (value: SomeModel | undefined) => void;
}

As soon as I input

b1

b1

b2

b2

I run in a case in which the model is invalid because only one of the two b-values exist. That's fine as an intermediate state but how do I represent this? I could add an extra callback

onValidationFailure

onValidationFailure

and call that. But then I have this weird state in which the state in the application does not reflect the state of the UI. So I would assume that I should also call

onChange(undefined)

onChange(undefined)

because we do not have a valid instance at this point in time. The issue is that this would break the two-way data binding because the value is updated with

undefined

undefined

and all input elements are cleared.

The other option would be to use two different models. So I have one for persistency and one which can represent all intermediate states. This results in a lot of boilerplate.

I hope my issue became kind of clear. How is this invalid intermediate state, which can not be represented by the "normal" model, handled in the components?

SolidJS•3y ago•

31 replies

zishh

Best Practices for Unrepresentable Intermediate State

interface SomeModel {
  a: string;
  b?: {
    b1: string;
    b2: string;
  };
}

interface SomeModel {
  a: string;
  b?: {
    b1: string;
    b2: string;
  };
}

If I want to create a custom component which can be used to create such a model instance, I want to have three input elements. The component props would look like this:

interface SomeComponentProps {
  value: SomeModel;
  onChange: (value: SomeModel | undefined) => void;
}

interface SomeComponentProps {
  value: SomeModel;
  onChange: (value: SomeModel | undefined) => void;
}

As soon as I input

b1

b1

b2

b2

I run in a case in which the model is invalid because only one of the two b-values exist. That's fine as an intermediate state but how do I represent this? I could add an extra callback

onValidationFailure

onValidationFailure

and call that. But then I have this weird state in which the state in the application does not reflect the state of the UI. So I would assume that I should also call

onChange(undefined)

onChange(undefined)

because we do not have a valid instance at this point in time. The issue is that this would break the two-way data binding because the value is updated with

undefined

undefined

Best Practices for Unrepresentable Intermediate State

Similar Threads

Best Practices for Unrepresentable Intermediate State

Similar Threads

Similar Threads

Similar Threads