How do I add more number of rows at a time? - reactjs

Question

I am trying to build a table-like structure in which I want to add rows dynamically. Here is my code:
import { React, useState } from 'react';
function Table() {
const [add, setAdd] = useState(false);
return (
<div>
<div className="headings">
<p>Item Description</p>
<p>Quantity</p>
<p>Rate</p>
<p>Amount</p>
</div>
<div className="rows">
<input placeholder="Item Description" type="text" />
<input placeholder="Quantity" type="number" />
<input placeholder="Price per piece" type="number" />
<input placeholder="Amount" type="number" />
</div>
{
add ?
<div className="rows" >
<input placeholder="Item Description" type="text" />
<input placeholder="Quantity" type="number" />
<input placeholder="Price per piece" type="number" />
<input placeholder="Amount" type="number" />
</div>
:
<div></div>
}
<button className="add" onClick={()=>setAdd(true)}>Add another line item</button>
</div>
)
}
export default Table;
I have tried adding rows using the button but I am able to add only a single row. The state changes to true so can I reset the state or should I use any other method for adding rows?

Answer 1

You need to set a counter in order to track how many rows you have, and preferably pass it on to another component.
This is not a complete example, neither beautiful one, but the essence is there:
import { React, useState } from "react";
function Rows({ numberOfRows }) {
return [...Array(numberOfRows)].map((element, index) => (
<div key={index}>{`Row Number ${index}`}</div>
));
}
function Table() {
const [numberOfRows, setNumberOfRows] = useState(0);
const addRow = () => {
setNumberOfRows((prev) => prev + 1);
};
const deleteRow = () => {
if (numberOfRows > 0) {
setNumberOfRows((prev) => prev - 1);
}
};
return (
<div>
<div className="headings">
<p>Item Description</p>
<p>Quantity</p>
<p>Rate</p>
<p>Amount</p>
</div>
<Rows numberOfRows={numberOfRows} />
<button className="add" onClick={addRow}>
Add row
</button>
<button className="delete" onClick={deleteRow}>
Delete row
</button>
</div>
);
}
export default Table;

Answer 2

You could keep the lines in state:
import { React, useState } from 'react';
function Table() {
const [addedLines, setAddedLines] = useState([<div key={1} className="rows">
<input placeholder="Item Description" type="text" />
<input placeholder="Quantity" type="number" />
<input placeholder="Price per piece" type="number" />
<input placeholder="Amount" type="number" />
</div>]);
const addLine = () => {
const newLine = (<div key={ addedLines.length + 1 } className="rows" >
<input placeholder="Item Description" type="text" />
<input placeholder="Quantity" type="number" />
<input placeholder="Price per piece" type="number" />
<input placeholder="Amount" type="number" />
</div>)
let a = []
addedLines.forEach((x)=>a.push(x))
a.push(newLine)
setAddedLines(a)
}
return (
<div>
<div className="headings">
<p>Item Description</p>
<p>Quantity</p>
<p>Rate</p>
<p>Amount</p>
</div>
{ addedLines}
<button className="add" onClick={addLine}>Add another line item</button>
</div>
)
}
export default Table;
Codepen: https://codepen.io/guilhermebl/pen/vYxvBWE