How do I change the state between inputs? - reactjs

Question

I am trying to make an application that calculates tax and discounts, but I could not figure out how to establish communication between states. Since the change between inputs will be continuous, I gave the onkeyup event for each inbox. Every time this event is called, the called function must do the necessary actions. For example, when I enter the quantity and unitPrice values, it will multiply the two values and assign them to the goodsServiceAmt value. The application also has the ability to add and delete rows. The calculations of each line should be in itself. I tried to do it with the handleQuantity function, the state is updating but the value in the input does not change.
const App = () => {
const [mainData, setMainData] = useState([
{
id: 1,
quantity: "",
unitPrice: "",
discRate: "",
discAmt: "",
kdvAmt: "",
kdvRate: "",
goodsServiceAmt: "",
},
]);
const deleteRow = (e, i) => {
e.preventDefault();
const newArr = [...mainData];
console.log(i);
newArr.splice(i, 1);
setMainData(newArr);
};
const handleChangeInput = (e, i) => {
const values = [...mainData];
values[i][e.target.name] = e.target.value;
setMainData(values);
};
const addRow = () => {
const id = mainData.length ? mainData.length + 1 : 0;
console.log(id);
setMainData([
...mainData,
{
id,
quantity: "",
unitPrice: "",
discRate: "",
discAmt: "",
kdvAmt: "",
kdvRate: "",
goodsServiceAmt: "",
},
]);
};
const handleQuantity = (e, i) => {
const deger = [...mainData];
deger[i].unitPrice = e.target.value;
setMainData(deger);
};
return (
<div style={{ display: "flex", flexDirection: "column" }}>
{mainData.map((v, i) => (
<form key={i} style={{ display: "flex" }}>
<span style={{ width: "50px", height: "50px" }}>{v.id}</span>
<div className="input-cont">
<label htmlFor="quantity">quantity</label>
<input
type="text"
name="quantity"
value={mainData.quantity}
onChange={(e) => handleChangeInput(e, i)}
onKeyUp={(e) => handleQuantity(e, i)}
/>
</div>
<div className="input-cont">
<label htmlFor="unitPrice">unitPrice</label>
<input
type="text"
name="unitPrice"
value={mainData.unitPrice}
onChange={(e) => handleChangeInput(e, i)}
/>
</div>
<div className="input-cont">
<label htmlFor="discRate">discRate</label>
<input
type="text"
name="discRate"
value={mainData.discRate}
onChange={(e) => handleChangeInput(e, i)}
/>
</div>
<div className="input-cont">
<label htmlFor="discAmt">discAmt</label>
<input
type="text"
name="discAmt"
value={mainData.discAmt}
onChange={(e) => handleChangeInput(e, i)}
/>
</div>
<div className="input-cont">
<label htmlFor="kdvRate">kdvRate</label>
<input
type="text"
name="kdvRate"
value={mainData.kdvRate}
onChange={(e) => handleChangeInput(e, i)}
/>
</div>
<div className="input-cont">
<label htmlFor="kdvAmt">kdvAmt</label>
<input
type="text"
name="kdvAmt"
value={mainData.kdvAmt}
onChange={(e) => handleChangeInput(e, i)}
/>
</div>
<div className="input-cont">
<label htmlFor="goodsServiceAmt">goodsServiceAmt</label>
<input
type="text"
name="goodsServiceAmt"
value={mainData.goodsServiceAmt}
onChange={(e) => handleChangeInput(e, i)}
/>
</div>
<button onClick={(e) => deleteRow(e, i)}>delete</button>
</form>
))}
<button onClick={addRow}>add row</button>
<button onClick={() => console.log(mainData)}>clg</button>
</div>
);
};
export default App;

Answer 1

That happens because you're accessing the data in your inputs like an object but in your useState it's an array.
Change your use state to:
const [mainData, setMainData] = useState({
id: 1,
quantity: "",
unitPrice: "",
discRate: "",
discAmt: "",
kdvAmt: "",
kdvRate: "",
goodsServiceAmt: "",
});
Or change the value in your inputs to:
value={mainData[0].quantity}

Answer 2

Since your mainData is an array, when you are doing this assign to the input value mainData.quantity, you are actually passing an undefined, converting the input to an uncontrolled input. That uncontrolled input makes it look like you are getting the data from the state, but actually it isn't. So you need to change those calls to mainData[i].quantity to get the data properly.
And as a note, you can still use the onChange function to handle the quantity