How do I add form data that has been input to table row?

Question

I have a table and a form. When the 'Add' button is clicked after entering details in the form I would like the data to be entered as a new table row in the table, however, none of the methods I have tried worked. I am using reactjs, reactstrap. Here is my code:

               <Row form>
                  <Col md={6}>
                    <FormGroup>
                      <Label for="proName">Product Name</Label>
                      <Input type="proName" name="proName" id="proName" placeholder="Product Name" />
                    </FormGroup>
                  </Col>
                  <Col md={6}>
                    <FormGroup>
                      <Label for="storeName">Store Name</Label>
                      <Input type="storeName" name="storeName" id="storeName" placeholder="Store Name" />
                    </FormGroup>
                  </Col>
                   <Col md={6}>
                    <FormGroup>
                      <Label for="pPrice">Price</Label>
                      <Input type="pPrice" name="pPrice" id="pPrice" placeholder="Price" />
                    </FormGroup>
                  </Col>
                </Row>

                 .......
                 <CardBody>
                  <Table className="tablesorter" responsive>
                    <thead className="text-primary">
                      <tr>
                        <th>Store</th>
                        <th>Product</th>
                        <th>Price</th>
                      </tr>
                    </thead>
                    <tbody id="tbid">
                      <tr>
                        <td>
                          {/*Here is where the new rows should be input*/}
                        </td>
                      </tr>
                    </tbody>                 
                  </Table>
                </CardBody>

Answer 1

This should be a good starting point for you.

https://codesandbox.io/s/modest-gates-o80t7?file=/src/styles.css

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [nums, setNums] = useState<Array<number>>([]);
  const [formNumber, setFormNumber] = useState<number | undefined>(undefined);

  function addNum(n: number) {
    setNums((currentNums) => [...currentNums, n]);
  }

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    e.stopPropagation();

    if (formNumber !== undefined && !isNaN(formNumber)) {
      addNum(formNumber);
    }
  }

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input
          type="number"
          placeholder="number"
          onChange={(e) => setFormNumber(parseFloat(e.target.value))}
        ></input>
        <button type="submit">Submit</button>
      </form>

      <table>
        <thead>
          <tr>
            <td>Index</td>
            <td>Number</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            {nums.map((n, idx) => (
              <tr>
                <td>{idx}</td>
                <td>{n}</td>
              </tr>
            ))}
          </tr>
        </tbody>
      </table>
    </div>
  );
}