onClick(), I want to add table row

Question

I want to add row on every click, but my code is replacing the same row.

Also tried to keep if outside addTable function but this did not work for me.

I tried many solutions but failed. Could anyone please help me here?

I have added my code below, Please check and let me know.

import { useState } from "react";
import "./App.css";
const App = (props) => {
  const [count, setCount] = useState(0);
  var [items, setItems] = useState([]);
  function addTable() {
    setCount(count + 1);
    if (count <= 10) {
      setItems(
        <tr>
          <td>5 x {count}</td>
          <td>{5 * count}</td>
        </tr>
      );
    }
  }
  console.log(count);
  return (
    <>
      <div className="button">
        <button onClick={addTable}>
          Click to generate Multiplication tables of 5{" "}
        </button>
      </div>
      <table>
        <thead>
          <tr>
            <th>Multiplication</th>
            <th>Results</th>
          </tr>
        </thead>
        <tbody>{items}</tbody>
      </table>
    </>
  );
};

export default App;

Does this answer your question? [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — WebPajooh, Jul 28 '22 at 17:24
Pushing JSX into state is generally not a good approach, and that maybe where the problem is. — Andy, Jul 28 '22 at 17:25

score 1 · Accepted Answer · answered Jul 28 '22 at 17:25

Well you're overwriting items in your onChange, you need to append to it:

setItems([
    ...items,
    <tr>
      <td>5 x {count}</td>
      <td>{5 * count}</td>
    </tr>
]);

But I would probably do instead is:

import { useState } from "react";
import "./App.css";
const App = (props) => {
  const [count, setCount] = useState(0);
  var [counts, setCounts] = useState([]);
  function addTable() {
    setCount(count + 1);
    if (count <= 10) setCounts([...counts, count]);
  }
  console.log(count);
  return (
    <>
      <div className="button">
        <button onClick={addTable}>
          Click to generate Multiplication tables of 5{" "}
        </button>
      </div>
      <table>
        <thead>
          <tr>
            <th>Multiplication</th>
            <th>Results</th>
          </tr>
        </thead>
        <tbody>{counts.map((c) => (
          <tr>
            <td>5 x {c}</td>
            <td>{5 * c}</td>
          </tr>
        )}</tbody>
      </table>
    </>
  );
};

export default App;

The above snippet worked for me. Thanks for that. I want to understand about `counts` in below code snippet. Could you please share some points on this? — Satyabrata Sahoo, Jul 28 '22 at 17:40

score 1 · Answer 2 · answered Jul 28 '22 at 17:57

When you call setItems you're replacing the current state with the new row.

I've removed the section that adds JSX to state (and removed that state altogether) and replaced it with two values: the current times table value, and an upper limit.

The new function getRows then has a simple loop that adds JSX to an array and returns that instead.

(Additionally I've disabled the button when the count exceeds the limit so you can't add any more rows.)

const { useState } = React;

const App = () => {
  
  // New constants
  const timesTable = 5;
  const limit = 10;
  
  // One state
  const [count, setCount] = useState(0);
  
  // The button updates the count
  function updateCount() {
    setCount(count + 1);
  }

  // And we have a simple loop to push the right
  // number of rows into an array which is
  // then returned
  function getRows(count) {
    const rows = [];
    for (let i = 0; i < count; i++) {
      rows.push(
        <tr class="row">
          <td>{timesTable} x {i}</td>
          <td>{timesTable * i}</td>
        </tr>
      );
    }
    return rows;
  }

  return (
    <div>
      <div className="button">
        <button
          disabled={count > limit}
          onClick={updateCount}
        >Add row to {timesTable}x table
        </button>
      </div>
      <table>
        <thead>
          <tr>
            <th>Multiplication</th>
            <th>Result</th>
          </tr>
        </thead>
        <tbody>
        {getRows(count)}
        </tbody>
      </table>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
);

.button { margin-bottom: 1em; }
table { border-collapse: collapse; }
th { text-transform: uppercase; }
tr:nth-child(odd) { background-color: #efefef; }
td, th { padding: 4px 8px; }
td { border: 1px solid #dfdfdf; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

onClick(), I want to add table row

2 Answers2