title: React hooks, grab value of checkbox onChange and pass to submitForm
body: <p>I currently have a working hook, that checks the onChange of input fields, then spreads (I think that is the term for <code>...</code>) them into a variable and send's them to a Lamda function to send a email with sendgrid. All of that is working. </p>
  
  <p>However if I add a input type of <code>checkbox</code> I am a little lost on the logic side. Because I am checking for the target's name and pairing that with it's value. Well the checkbox has a checked state not a value.
  I assume I have to do something like <code>e.target.checked</code> in my <code>setFormState</code> <strong>however how do I do that as well as the <code>e.target.value</code> and still spread it to <code>...formState</code>?</strong> </p>
  
  <p>I am a react noob.</p>
  
  <p>Here is my react state and the change event and submit event</p>
  
  <pre><code>const [formState, setFormState] = React.useState({
      name: "",
      package: `${data.datoCmsPricing.title}`,
      email: "",
      subject: "",
      weightLoss:"",
      message: "",
    })
  
    const onChange = (e) =&gt; {
      setFormState({...formState, [e.target.name]: e.target.value });
   }
  
   const submitForm = async (e) =&gt; {
    e.preventDefault();
  
    console.log("test");
  
    try{
      const response = await fetch("/.netlify/functions/sendmail", {
        method: "POST",
        body: JSON.stringify(formState),
      })
  
      if (!response.ok) {
        console.log(response);
        return
      }
  
      console.log("success email");
  
    } catch(e){
  
      console.log("error");
  
    }
  }
  </code></pre>
  
  <p>Here is my form code</p>
  
  <pre><code>&lt;form onSubmit={submitForm}&gt;
          &lt;label&gt;
            Name
            &lt;input
              type="text"
              name="name"
              value={formState.name}
              onChange={onChange}
            /&gt;
          &lt;/label&gt;
          &lt;label&gt;
            Email
            &lt;input
              type="email"
              name="email"
              value={formState.email}
              onChange={onChange}
            /&gt;
          &lt;/label&gt;
          &lt;label&gt;
            Subject
            &lt;input
              type="text"
              name="subject"
              value={formState.subject}
              onChange={onChange}
            /&gt;
          &lt;/label&gt;
          &lt;div&gt;
            &lt;h3&gt;Reasons for wanting to train&lt;/h3&gt;
            &lt;label&gt;
            Weight Loss
            &lt;input 
              type="checkbox"
              name="weightLoss"
              checked={formState.weightLoss}
              onChange={onChange}
            /&gt;
          &lt;/label&gt;
          &lt;/div&gt;
  
          &lt;label&gt;
            message
            &lt;textarea
              name="message"
              value={formState.message}
              onChange={onChange}
            /&gt;
          &lt;/label&gt;
          &lt;button type="submit"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
  </code></pre>