title: How to display a number in an object according to its modifications?
body: <p>The <a href="https://github.com/charles7771/decrease-number-wont-work/blob/master/index.js" rel="nofollow noreferrer">whole component is on this github url</a> if necessary</p>
  
  <p>I'm trying to decrease a number and display it in real time as it is decreased.</p>
  
  <pre><code>  const counts = {"2200": 1, "2230": 1, "2300": 3}
  
    const displayTimes = availableTimes.map((item) =&gt; {
      if (timeExists) {
          //should show number as it is decreasing, but will only show default, first number set
        return &lt;span&gt; {counts[`${item.time}`]} &lt;/span&gt; 
      } else {
          return (
              &lt;li onClick={ () =&gt; counts[`${item.time}`] &gt; 1 &amp;&amp; counts[`${item.time}`]-- }&gt; //decreases count by 1.
                  {`${item.time}`}
              &lt;/li&gt;
          )
      } 
    }
   return (
      &lt;div&gt;
        &lt;ul&gt;{displayTimes}&lt;/ul&gt;
      &lt;/div&gt;
    )
  </code></pre>
  
  <p>The decreasing does work, I've tested that; showing the number as it decreases doesn't.</p>
  
  <p>I tried using useState inside of this function but React won't allow me. I'm not even sure I need to use useState for this...</p>