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.

1 Answers

0
tjhack On

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