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;

CodePudding user response：

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;

CodePudding user response：

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 >
          <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>