Dynamically update react table from input

Question

I am very new to this...

So I have this react app that I am playing with. Currently, I can input data into the text fields and the data from those fields populate onto the first line of the table. How do I make a second row appear as I submit a new set of info?

Github link: https://github.com/APoythress/profit-tracker

Here is Table component that is being rendered in the App component:

import React from "react";

export default function Table({itemProfit, itemSell, itemCost, itemName}) {

    return (
        <div>
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">Item Name</th>
                        <th scope="col">Cost</th>
                        <th scope="col">Sell</th>
                        <th scope="col">Profit</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{itemName}</td>
                        <td>$ {itemCost}</td>
                        <td>$ {itemSell}</td>
                        <td>$ {itemProfit}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    );
}

And here is the App component

function App() {
  const [itemName, setItemName] = useState(['']);
  const [itemCost, setItemCost] = useState([]);
  const [itemSell, setItemSell] = useState([]);
  const [itemProfit, setItemProfit] = useState([]);

  const itemNameRef = useRef()
  const itemCostRef = useRef()
  const itemSellRef = useRef()
  const itemProfitRef = useRef()


    function handleSubmit(e) {
        itemNameSubmit()
        itemCostSubmit()
        itemSellSubmit()
        itemProfitSubmit()
    }

    function itemNameSubmit(e) {
      setItemName(itemNameRef.current.value)
    }

    function itemCostSubmit(e) {
      setItemCost(itemCostRef.current.value)
    }

    function itemSellSubmit(e) {
    setItemSell(itemSellRef.current.value)
    }

    function itemProfitSubmit(e) {
      setItemProfit(itemSell - itemCost)
    }

   

  return (
    <Container>
      <Banner />
      <br></br>
      <Container>
          <table class="table">
              <thead>
                  <tr>
                      <th scope="col">Item</th>
                      <th scope="col">Cost</th>
                      <th scope="col">Sell</th>
                      <th scope="col">Profit</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>
                          <input ref={itemNameRef} ></input>
                      </td>
                      <td>
                          <input ref={itemCostRef} ></input>
                      </td>
                      <td>
                          <input ref={itemSellRef} ></input>
                      </td>
                      <td>
                          <input ref={itemProfitRef} ></input>
                      </td>
                  </tr>
              </tbody>
          </table>
      </Container>
      <Button onClick={handleSubmit} >Submit</Button>
      <Table itemName={itemName} itemCost={itemCost} itemSell={itemSell} itemProfit={itemProfit}/>

    </Container>
    
  );
}

export default App;

Answer 1

You can:

• make you App.js state track list of items instead of a single one.

• Add an item to the item list state on click

• Pass the item list to your table component

• iterate through the item (of the item list) inside the table component and for each print its row