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;

exaucae · Accepted Answer · 2021-11-26 18:27:16Z

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

answered Nov 26, 2021 at 18:27

exaucae

2,7152 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Austin Poythress Over a year ago

So are you saying make the items an <ul> item instead of a table item?

Collectives™ on Stack Overflow

Dynamically update react table from input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related