title: react checkbox onChange to call function is check state is true in typescript
body: <p>I am exploring the react <code>onChange</code> feature. The functionality I would like to do is
  when checkbox is selected, I would like to update local data to add some value
  when checkbox is unselected, I would like to just populate the original data
  the code I have seems do the reverse of what I want. any can provide some guideline?</p>
  <p><a href="https://codesandbox.io/s/pensive-breeze-w259y?file=/src/App.js" rel="nofollow noreferrer">codesandbox</a></p>
  <pre><code>import &quot;./styles.css&quot;;
  import { useState } from &quot;react&quot;;
  
  export default function App() {
    const localData = [{ name: &quot;apple&quot;, phone: 12345 }];
    const [check, setCheck] = useState(false);
    const [data, setData] = useState(localData);
    const handleOnChange = () =&gt; {
      setCheck(!check);
      check ? setData([...data, { name: &quot;amazon&quot;, phone: 222 }]) : setData(data);
    };
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;p&gt;
          &lt;input type=&quot;checkbox&quot; check onChange={handleOnChange}&gt;&lt;/input&gt;
        &lt;/p&gt;
        &lt;p&gt;{JSON.stringify(data)}&lt;/p&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>