title: onClick(), I want to add table row
body: <p>I want to add row on every click, but my code is replacing the same row.</p>
  <p>Also tried to keep <code>if</code> outside addTable function but this did not work for me.</p>
  <p>I tried many solutions but failed. Could anyone please help me here?</p>
  <p>I have added my code below, Please check and let me know.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { useState } from "react";
  import "./App.css";
  const App = (props) =&gt; {
    const [count, setCount] = useState(0);
    var [items, setItems] = useState([]);
    function addTable() {
      setCount(count + 1);
      if (count &lt;= 10) {
        setItems(
          &lt;tr&gt;
            &lt;td&gt;5 x {count}&lt;/td&gt;
            &lt;td&gt;{5 * count}&lt;/td&gt;
          &lt;/tr&gt;
        );
      }
    }
    console.log(count);
    return (
      &lt;&gt;
        &lt;div className="button"&gt;
          &lt;button onClick={addTable}&gt;
            Click to generate Multiplication tables of 5{" "}
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Multiplication&lt;/th&gt;
              &lt;th&gt;Results&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;{items}&lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/&gt;
    );
  };
  
  export default App;</code></pre>
  </div>
  </div>
  </p>