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>
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>
);
}