title: React/React Hooks: I am trying to trigger a validation using hooks whenever a user leaves input field
body: <p>I have a component that I’ve designed using react hooks with on change functionality wired up so that the input field is pre-populated with a customer email address, and if the user clicks the email opt out checkbox it clears and disables the input. I am now trying to design an on change event when a user enters a new email address and leaves the input field that will trigger an email validation to ensure it’s the correct format. I have written a function using regex that contains the error message I want to display, but I’m not sure how to implement it with my main component as it stands now. I've included the validation function as well as my main component below. I’m fairly new to hooks so trying to wrap my head around how to implement all of this logic has proven to be a bit difficult, so any suggestions/code examples on how to pull this off would be a huge help</p>
  
  <pre><code>Function for Email Validation
  </code></pre>
  
  <pre><code>export default function validate(values) {
    let errors = {};
    if (!values.email) {
      errors.email = 'Email address is required';
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
      errors.email = 'Email address is invalid';
    }
    return errors;
  };
  
  </code></pre>
  
  <pre><code>Main Component
  </code></pre>
  
  <pre><code>import React from 'react'
  import PropTypes from 'prop-types'
  import styled from 'styled-components'
  import {
    Col, Row, Icon, Input, Tooltip
  } from 'antd'
  import Checkbox from '../elements/Checkbox'
  import Markup from '../core/Markup'
  
  const CustomerDetails = ({ customer }) =&gt; {
    const { contact = {}, account = {}, site = {} } = customer || {}
    const [disableInput, setDisableInput] = React.useState(false)
    const [inputValue, setInputValue] = React.useState(contact.email)
  
    function clearInput() {
      setInputValue(' ')
    }
  
    function handleInputChange(event) {
      setInputValue(event.target.value)
    }
  
    function CheckboxClick() {
      if (!disableInput) {
        clearInput()
      }
      setDisableInput(prevValue =&gt; !prevValue)
    }
  
  
    return (
      &lt;Container&gt;
        &lt;h2&gt;{account.name}&lt;/h2&gt;
        &lt;Row&gt;
          &lt;Col span={8}&gt;
            &lt;H3&gt;
              &lt;strong&gt;Primary Contact:&lt;/strong&gt;
            &lt;/H3&gt;
            &lt;P&gt;{contact.name}&lt;/P&gt;
            &lt;P&gt;{contact.phone}&lt;/P&gt;
          &lt;/Col&gt;
          &lt;Col span={8}&gt;
            &lt;H3&gt;
              &lt;strong&gt;Service Address:&lt;/strong&gt;
            &lt;/H3&gt;
            &lt;P&gt;{site.address1}&lt;/P&gt;
            &lt;P&gt;{site.address2}&lt;/P&gt;
            &lt;P&gt;
              {site.city},&amp;nbsp;{site.state}&amp;nbsp;
              {site.postalCode}
            &lt;/P&gt;
          &lt;/Col&gt;
          &lt;Col span={8}&gt;
            &lt;H3&gt;
              &lt;strong&gt;Billing Address:&lt;/strong&gt;
            &lt;/H3&gt;
            &lt;StyledMarkup&gt;{account.billingStreet}&lt;/StyledMarkup&gt;
            &lt;P&gt;
              {account.billingCity},&amp;nbsp;{account.billingState}
              &amp;nbsp;
              {account.billingPostalCode}
            &lt;/P&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
        &lt;br /&gt;
        &lt;Row&gt;
          &lt;Col span={10}&gt;
            &lt;h4&gt;
              PRIMARY CONTACT EMAIL &amp;nbsp;
              &lt;Tooltip
                placement="right"
                title={primaryContact}
              &gt;
                &lt;StyledTooltipIcon
                  type="question-circle"
                  theme="filled"
                /&gt;
              &lt;/Tooltip&gt;
            &lt;/h4&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
        &lt;Row&gt;
          &lt;Col span={8}&gt;
            &lt;StyledInput
              value={inputValue}
              onChange={handleInputChange}
              disabled={disableInput}
            /&gt;
          &lt;/Col&gt;
          &lt;Col span={2} /&gt;
          &lt;Col span={8}&gt;
            &lt;StyledCheckbox
              value={disableInput}
              onChange={CheckboxClick}
            /&gt; EMAIL
            OPT OUT{' '}
          &lt;/Col&gt;
        &lt;/Row&gt;
        &lt;br /&gt;
      &lt;/Container&gt;
    )
  }
  
  CustomerDetails.propTypes = {
    customer: PropTypes.object
  }
  
  CustomerDetails.defaultProps = {
    customer: {}
  }
  
  export default CustomerDetails
  
  </code></pre>