title: Update Object Key Value with onClick
body: <p>This function is based on the darts game Cricket. The idea is when the '20' button is pressed it will update the object value with the number of twenties pressed.</p>
  <pre><code>function Cricket() {
  
    let awayMarks = {Twenty: 0}
  
    const handleClick = () =&gt; {
      awayMarks.Twenty++;
    }
  
    return (
          &lt;div&gt;
              &lt;Button onClick={handleClick}&gt;20&lt;/Button&gt; 
          &lt;/div&gt;
    )
  }
  
  export default Cricket
  </code></pre>
  <p>For those that are unfamiliar with the game eventually the object will have 7 keys with values. So my question is, is using an object in this manner the best way to update the number of times a number has been hit or would it be better to use useState()?
  Currently this does not update <code>awayMarks</code>. I can get it to output a <code>console.log</code> but it will not update.</p>