ReactNative How to remove button disabled state when edit form is populated

Question

I have a form where I have save button state disabled by default. When 2 textFields have a value I toggle the state. In another instance of the same form when edit method opens the form with values I want the button state not to be disabled.

Note I am using redux also.

Here is the form for add.

const MyForm = ({ navigation, ...props }) => {
  const [isDisabled, setIsDisabled] = useState(true);

  const handlePrice = (enteredPrice) => {
    setPrice(enteredPrice);
    isValueEntered(enteredPrice, windowType);
  };

  const handleType = (enteredText) => {
    setWindowType(enteredText);
    isValueEntered(price, enteredText);
  };
  // This is where disabled is toggled for save button
  const isValueEntered = (priceSet, type) => {
    if (priceSet != 0 && type.length > 1) {
      setIsDisabled(false);
    }
  };

  const handleSubmit = () => {
    props.onFormSubmit({
      id: props.id,
      windowType,
      price,
    });
    setWindowType('');
    setPrice(0);
    // other values
  };

  return (
    <FormWrapper>
      // ....
      <Button
        title="Save"
        onPress={() => handleSubmit()}
        disabled={isDisabled ? true : false}
      ></Button>
      <StyledInput
        placeholder={'Window Type'}
        color={'black'}
        onChangeText={handleType}
        value={windowType}
        width={'175px'}
      />
      <StyledInput
        width={'65px'}
        color={'black'}
        onChangeText={handlePrice}
        value={`${price}`}
        keyboardType="decimal-pad"
        returnKeyType="done"
      />
      // ...
    </FormWrapper>
  );
};

Here is what my instance of edit form looks like.

const EditableCounter = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleEditClick = () => {
    setIsOpen(true);
  };

  const handleFormClose = () => {
    closeForm();
  };

  const closeForm = () => {
    setIsOpen(false);
  };

  const handleSubmit = (counter) => {
    props.onFormSubmit(counter);
    closeForm();
  };

  return isOpen ? (
    <MyForm
      key={props.counter.item.id}
      id={props.counter.item.id}
      windowType={props.counter.item.windowType}
      price={props.counter.item.price}
      onFormClose={handleFormClose}
      onFormSubmit={handleSubmit}
    />
  ) : (
    <Counter
      key={props.counter.item.id}
      counter={props.counter.item}
      onFormClose={handleFormClose}
      onEditClick={handleEditClick}
    />
  );
};

Answer 1

One way is to use useEffect hook with form fields as dependencies. When any dependency changes, validate the form again. Something like this:

const [isDisabled, setIsDisabled] = useState(true);

useEffect(() => {
  setIsDisabled(text.length < 1)
}, [text])

return (
  <View>
    <TextInput onChangeText={setText} value={text} />
    <Button title="Save" disabled={isDisabled} />
  </View>
);