title: React disable and enable button based on parent input function and click of button
body: <p>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.</p>
  
  <p>Code is below</p>
  
  <pre><code>&lt;ChildButton
              onClick={() =&gt; {
                this.checkSomething= this.checkCreds();
              }}
              enabled={this.validateInput()}
            /&gt;
  </code></pre>
  
  <p>My pure component currently looks like this:</p>
  
  <pre><code>export function AButton({ onClick, enabled, text }) {
    const [disabled, setDisabled] = useState(!enabled);
  
    function handleClick() {
      setDisabled(!disabled);
      //onClick();
    }
    return (
      &lt;Button
        style={{ display: "block", margin: "auto" }}
        id="next-button"
        onClick={handleClick}
        disabled={disabled}
      &gt;
        {text}
      &lt;/Button&gt;
    );
  }
  </code></pre>
  
  <p>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.</p>