title: React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
body: <p>I have a function component with a checkbox and an input. I'm trying to create an onChange function for the checkbox that clears the input and disables it whenever a user clicks it by implementing the <code>useState</code> React Hook. Does anyone have any experience with Hooks who's done something like this before? I'm trying to look at code samples to better wrap my head around this as I'm still new to React Hooks</p>
  
  <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'
  
  const CustomerDetails = ({ customer }) =&gt; {
    if (customer === null) {
      return (
        &lt;Container&gt;
          &lt;Row&gt;
            &lt;Col span={24}&gt;
              &lt;ErrorContainer&gt;
                &lt;Icon type="exclamation-circle" /&gt;
              &lt;/ErrorContainer&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Container&gt;
      )
    }
  
    return (
      &lt;Container&gt;
        &lt;h2&gt;{customer.contact.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;{customer.contact.name}&lt;/P&gt;
            &lt;P&gt;{customer.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;{customer.site.address1}&lt;/P&gt;
            &lt;P&gt;{customer.site.address2}&lt;/P&gt;
            &lt;P&gt;
              {customer.site.city},&amp;nbsp;{customer.site.state}&amp;nbsp;
              {customer.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;P&gt;{customer.account.billingStreet}&lt;/P&gt;
            &lt;P&gt;
              {customer.account.billingCity},&amp;nbsp;{customer.account.billingState}
              &amp;nbsp;
              {customer.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="topRight"
                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={customer.contact.email} /&gt;
          &lt;/Col&gt;
          &lt;Col span={2} /&gt;
          &lt;Col span={8}&gt;
            &lt;StyledCheckbox /&gt; EMAIL OPT OUT{' '}
            &lt;Tooltip
              placement="topRight"
              title={emailText}
            &gt;
              &lt;StyledTooltipIcon
                type="question-circle"
                theme="filled"
              /&gt;
            &lt;/Tooltip&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Container&gt;
    )
  }
  
  CustomerDetails.propTypes = {
    customer: PropTypes.object
  }
  
  CustomerDetails.defaultProps = {
    customer: {}
  }
  
  const Container = styled.div`
    text-align: left;
  `
  const StyledCheckbox = styled(Checkbox)`
    input + span {
      border-radius: 0px;
      width: 35px;
      height: 35px;
      border: 2px solid ${({ theme }) =&gt; theme.colors.black};
      background-color: transparent;
      color: ${({ theme }) =&gt; theme.colors.black};
      border-color: ${({ theme }) =&gt; theme.colors.black};
      transition: none;
    }
  
    input:checked + span {
      border: 2px solid ${({ theme }) =&gt; theme.colors.black};
      width: 30px;
      height: 30px;
    }
  
    input + span:after {
      border-color: ${({ theme }) =&gt; theme.colors.black};
      left: 20%;
      transition: none;
      width: 12.5px;
      height: 20px;
    }
  
    input:disabled + span:after {
      border-color: ${({ theme }) =&gt; theme.colors.gray};
    }
  
    input:not(:checked):hover + span:after {
      border-color: ${({ theme }) =&gt; theme.colors.gray};
      opacity: 1;
      transform: rotate(45deg) scale(1) translate(-50%, -50%);
    }
  
    input:focus + span {
      border-color: ${({ theme }) =&gt; theme.colors.primary};
    }
  `
  
  const StyledInput = styled(Input)`
    max-width: 100%;
  
    &amp;&amp;&amp; {
      border: 2px solid ${({ theme }) =&gt; theme.colors.black};
      border-radius: 0px;
      height: 35px;
    }
  `
  
  const ErrorContainer = styled.div`
    /* margin-left: 25%; */
  `
  
  const StyledTooltipIcon = styled(Icon)`
    color: #1571da;
  `
  
  const H3 = styled.h3`
    white-space: nowrap;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
  }
  `
  
  const H4 = styled.h4`
    text-decoration: underline;
    color: #1590ff;
  `
  
  const P = styled.p`
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1rem;
  `
  
  export default CustomerDetails
  
  </code></pre>