根据父输入功能和单击按钮反应禁用和启用按钮

Question

So basically i have a parent component which uses a child button component. Basically currently when the input validation is not correct it will keep the button disabled. However now I have tried to disable the button on click. The button is currently a pure component and i started to use hooks but not sure how i can still get the validation running.

Code is below

<ChildButton
            onClick={() => {
              this.checkSomething= this.checkCreds();
            }}
            enabled={this.validateInput()}
          />

My pure component currently looks like this:

export function AButton({ onClick, enabled, text }) {
  const [disabled, setDisabled] = useState(!enabled);

  function handleClick() {
    setDisabled(!disabled);
    //onClick();
  }
  return (
    <Button
      style={{ display: "block", margin: "auto" }}
      id="next-button"
      onClick={handleClick}
      disabled={disabled}
    >
      {text}
    </Button>
  );
}

So i can get the disable button to work in both scenairos. As the enabled is always being passed down into this pure component so need to keep setting state of it.

Answer 1

I ended up using useEffect from react hooks

useEffect(() => setDisabled(!enabled), [enabled]);

This will check every time the enabled props is updated from the parent. Similar to how componentDidUpdate would work