title: React/React-Hooks: I need to run a validation on an input field depending on active/inactive state
body: <p>I have a component I created using React hooks that features an input and a checkbox. I've attached a function to the input to validate an email address. I have a function on the checkbox that clears the input and disables it. I'm trying to rewrite my validation function to run whenever the input field is active so that even if a user clicks the checkbox to clear and disable the field and then clicks it again to re enable it, the validation will run again and prompt the user with the error message to enter an email address. As of now my input is setup with an onBlur function that runs the validation as soon as the user enters and exits the input. I need to maintain this functionality, but augment it to also run whenever the input is enabled. I have a code sandbox <a href="https://codesandbox.io/s/friendly-breeze-2ly5h" rel="nofollow noreferrer">here</a> for further context and my component in short format below:</p>
  
  <pre><code>import React from "react";
  import PropTypes from "prop-types";
  import styled from "styled-components";
  import { Col, Row, Input, Checkbox } from "antd";
  
  function validateEmail(value) {
    const errors = {};
    if (value === "") {
      errors.email = "Email address is required";
    } else if (!/\S+@\S+\.\S+/.test(value)) {
      errors.email = "Email address is invalid";
    }
    return errors;
  }
  
  const CustomerDetails = ({ customer }) =&gt; {
    const { contact = {} } = customer || {};
    const [disableInput, setDisableInput] = React.useState(false);
    const [errors, setErrors] = React.useState({});
    const [inputValue, setInputValue] = React.useState(contact.email);
  
    function onBlur(e) {
      setErrors(validateEmail(e.target.value));
    }
  
    function clearInput() {
      setInputValue(" ");
    }
  
    function handleInputChange(event) {
      setInputValue(event.target.value);
    }
  
    function CheckboxClick(e) {
      if (!disableInput) {
        clearInput();
      }
      setDisableInput(prevValue =&gt; !prevValue);
      setErrors({});
    }
  
    return (
      &lt;Container&gt;
        &lt;Row&gt;
          &lt;Col span={8}&gt;
            &lt;StyledInput
              value={inputValue}
              onChange={handleInputChange}
              disabled={disableInput}
              onBlur={onBlur}
              isError={!!errors.email}
            /&gt;
            {errors.email &amp;&amp; &lt;ErrorDiv&gt;{errors.email}&lt;/ErrorDiv&gt;}
          &lt;/Col&gt;
          &lt;Col span={8}&gt;
            &lt;Checkbox value={disableInput} onChange={CheckboxClick} /&gt; EMAIL OPT
            OUT
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Container&gt;
    );
  };
  
  const Container = styled.div`
    text-align: left;
  `;
  
  const ErrorInput = ({ isError, ...remainingProps }) =&gt; (
    &lt;Input {...remainingProps} /&gt;
  );
  
  ErrorInput.propTypes = {
    isError: PropTypes.bool
  };
  
  const StyledInput = styled(ErrorInput)`
    max-width: 100%;
    background: white;
  
    &amp;&amp;&amp; {
      border: 2px solid ${props =&gt; (props.isError ? "#d11314" : "black")};
      border-radius: 0px;
      height: 35px;
    }
  `;
  
  const ErrorDiv = styled.div`
    color: #d11314;
  `;
  
  export default CustomerDetails;
  
  </code></pre>