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

            onClick={() => {
              this.checkSomething= this.checkCreds();

My pure component currently looks like this:

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

  function handleClick() {
  return (
      style={{ display: "block", margin: "auto" }}

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

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