React render component on button click

Question

How do I call/render a component on a button click in React? I'm creating a table using 'form' and calling the rows as separate components. I'd like a user to be able to click a button to add more rows to the table if they need to. I added a button with an 'onClick' to call the row but nothing happens.

Here is part of the code in the 'Estimate' component so far:

import React, { useState } from "react";
import EstimateRow from "./EstimateRow";


const Estimate = () => {
    return(
<div className="estimate-column-names">
                <h3>Category</h3>
                <h3>Subcategory</h3>
                <h3>Item Name</h3>
                <h3>Quanitity</h3>
                <h3>Unit of Measure</h3>
                <h3>Unit Cost</h3>
                <h3>Base Cost</h3>
                <h3>Markup %</h3>
                <h3>Profit Amt</h3>
                <h3>Profit Margin</h3>
                <h3>Total Cost</h3>
            </div>
            <EstimateRow />
            <EstimateRow />
            <EstimateRow />
            <EstimateRow />
            <button 
            className="button"
                      onClick={(e) => {
                          <EstimateRow />;
                      }}
                      >
                        Add Row
                        </button>
            <button type="Submit">Delete Row</button>
)}

EstimateRow component just has a series of inputs for each column header. Upon button click, I expected the EstimateRow to be rendered again and add more rows to the table. But nothing happens. I tried calling/importing it as an async function and attaching the result to a useState but that didn't work either.

Answer 1

React render component on button click

we should think to use state to control dom elem like dom manipulation, state can control.

[here it is an example] (https://codesandbox.io/s/flamboyant-james-wygdwx)

import React, { useCallback, useState } from "react";
import { EstimateRow } from "./EstimateRow";

const Estimate = () => {
  const [rows, setRows] = useState([]);
  const handleDelete = useCallback(
    (param) => {
      if (rows.length === 0) {
        alert("add rows before you delete");
      }
      const items = rows.filter((item) => item !== param);
      setRows(items);
    },
    [rows]
  );
  return (
    <>
      <div className="estimate-column-names">
        <h3>Category</h3>
        <h3>Subcategory</h3>
        <h3>Item Name</h3>
        <h3>Quanitity</h3>
        <h3>Unit of Measure</h3>
        <h3>Unit Cost</h3>
        <h3>Base Cost</h3>
        <h3>Markup %</h3>
        <h3>Profit Amt</h3>
        <h3>Profit Margin</h3>
        <h3>Total Cost</h3>
      </div>
      <div>
        {rows.map((row) => (
          <EstimateRow row={row} />
        ))}
      </div>
      <button
        className="button"
        onClick={() => setRows([...rows, rows.length + 1])}
      >
        Add Row
      </button>
      <button onClick={() => handleDelete(rows.length)}>Delete Row</button>
    </>
  );
};
export default Estimate;

---

• row component

export const EstimateRow = ({row}) =>(
  <div>
  row Component {row}
  </div>
)