title: Simple React counter not working, also can't console.log useState variables?
body: <p>I'm fairly new to React (only started learning a month ago) and I'm trying to get a simple counter to show on the page, but it only ever updates once. Also, whenever I <code>console.log()</code> useState variables, they're always empty, but since I added them to output on the page, I can see that they're updating, but I still can't console.log the values? What gives? I must be doing something wrong but I can't see to figure out why. </p>
  
  <p>Here's a demo of the "problem" in a <a href="https://codesandbox.io/s/jqwidgets-react-testing-library-mxo8k" rel="nofollow noreferrer">codesandbox</a>.</p>
  
  <p>this is the code:</p>
  
  <pre><code>import React, { useState } from "react";
  
  import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css";
  import JqxInput from "jqwidgets-scripts/jqwidgets-react-tsx/jqxinput";
  
  const MyForm2: React.FC = () =&gt; {
    const [count, setCount] = useState(0);
    const [email, setEmail] = useState("");
    const [name, setName] = useState("");
  
    const onEmailChange = (e?: any) =&gt; {
      setCount(count + 1);
      setEmail(e.args.value);
      console.log('You typed: ' + e.args.value);
      console.log("name: " + name + ", email: " + email);
    };
  
    const onNameChange = (e?: any) =&gt; {
      setCount(count + 1);
      setName(e.args.value);
    };
  
    return (
      &lt;div&gt;
        Name:{" "}
        &lt;JqxInput value={name} onChange={(e: any) =&gt; setName(e.args.value)} /&gt;
        Email: &lt;JqxInput value={email} onChange={onEmailChange} /&gt;
        &lt;p&gt;Count: {count}&lt;/p&gt;
        &lt;p&gt;email: {email}&lt;/p&gt;
        &lt;p&gt;name: {name}&lt;/p&gt;
      &lt;/div&gt;
    );
  };
  
  export default MyForm2;
  </code></pre>
  
  <p>Thanks. I look forward to finding out my spectacular mistake :-)</p>