Edit Button and Dialog in the Machine Table

Clicking on Edit Button in Machine table opens MachinesEditForm. In this form, the information is gathered in the form and the state element productInEdit is set to a new JSON dataItem variable.

const dataItem = this.state.productInRealEdit; This Then this variable is stringified and passed into the body of the API PUT request.

fetch('https://jos-rg-fun-usw2-task62.azurewebsites.net/api/v1/machines' , { method: "PUT", headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(dataItem), }).then..............

After the request was completed, the this.state.productInRealEdit needs to be set to undefined, because the add new machine dialog appears only when the product is in edit state. If the product is in an undefined state, the dialog will disappear.

this.setState({ productInRealEdit: undefined });

To find out if the PUT request was successful or failed - look in the console for messages and the table for a edited values in machine table row or in details dialog