How to update quantity on basket on REACT table like below? - reactjs

Question

I have been trying without any luck, my implementation inside the Update method is not updating the state of products. Please assist with what am I doing wrong. I am using Functional Components with Hooks.
function MyTable() {
const initState = [
{ id: 1, name: "bread", quantitiy: 50, location: "cupboard" },
{ id: 2, name: "milk", quantitiy: 20, location: "fridge" },
{ id: 3, name: "water", quantitiy: 10, location: "fridge" }
];
const [state, setState] = React.useState(initState);
const handleUpdateQuantity = (productId: any, value: any) => {
let newData = data;
var index: number = newData.findIndex(
(product: any) => product.id === productId
)
if (index !== -1) {
newData[index].quantity = value
setData(newData)
} else {
console.log("Product not existing on table data...")
}
}
return (
<table>
<tr key={"header"}>
{Object.keys(state[0]).map((key) => (
<th>{key}</th>
))}
</tr>
{state.map((item) => (
<tr key={item.id}>
<td>{item.name}</td>
<td>{item.location}</td>
<TextField
type="number"
defaultValue={1}
onChange={(event) =>
handleUpdateQuantity(item.id, event.target.value)
}
/>
<td>{item.quantitiy}</td>
</tr>
))}
</table>
);
}
ReactDOM.render(<MyTable />, document.getElementById("target"));

Answer 1

You can use a functional update(as the new state depends on the previous state):
const handleUpdateQuantity = (productId: any, value: any) => {
setData(prevData => prevData.map(el => {
if(el.id === productId) {
return {...el, quantity: value};
}
return el;
}))
}
Also, quantitiys in the initial state has a typo.
and in the JSX, add value prop to the text field:
<TextField
type="number"
defaultValue={1}
value={item.quantity}
onChange={(event) =>
handleUpdateQuantity(item.id, event.target.value)
}
/>