We will implement the edit functionality by changing the table to editable and adding the save button to each row. The save button will invoke the function that sends the PUT request to the backend for saving the changes to the database:

1. Add the cell renderer, which changes the table cells to editable. Open the Carlist.js file and create a new function called renderEditable. See the source code for the following function. The cell will be the div element and the contentEditable attribute makes it editable. suppressContentEditableWarning suppresses the warning that comes when the element with the child is marked to be editable. The function in onBlur is executed when the user leaves the table cell, and this is where we will update the state:

renderEditable = (cellInfo) => {
  return (
    <div
      style={{ backgroundColor: "#fafafa" }}
      contentEditable
      suppressContentEditableWarning
      onBlur={e => {
        const data = [...this.state.cars];
        data[cellInfo.index][cellInfo.column.id] = 
         e.target.innerHTML;
        this.setState({ cars: data });
      }}
      dangerouslySetInnerHTML={{
        __html: this.state.cars[cellInfo.index][cellInfo.column.id]
      }} 
    />
  );
} 

2. Define the table columns that are going to be editable. This is done using the Cell attribute of the column in React Table, which defines how the cell of the column will be rendered:

const columns = [{
  Header: 'Brand',
  accessor: 'brand',
  Cell: this.renderEditable
}, {
  Header: 'Model',
  accessor: 'model',
  Cell: this.renderEditable
}, {
  Header: 'Color',
  accessor: 'color',
  Cell: this.renderEditable
}, {
  Header: 'Year',
  accessor: 'year',
  Cell: this.renderEditable
}, {
  Header: 'Price €',
  accessor: 'price',
  Cell: this.renderEditable
}, {
  id: 'delbutton',
  sortable: false,
  filterable: false,
  width: 100,
  accessor: '_links.self.href',
  Cell: ({value}) => (<button onClick={()=>{this.onDelClick(value)}}>Delete</button>)
}]

Now, if you open the app in your browser, you can see that the table cells are editable:

3. To update car data, we have to send the PUT request to the http://localhost:8080/api/cars/[carid] URL. The link will be the same as with the delete functionality. The request contains the updated car object inside the body, and the 'Content-Type': 'application/json' header that we had in the add functionality. Create a new function, called updateCar, and the source code of the function is shown in the following code snippet. The function gets two arguments, the updated car object and the request URL. After the successful update, we will show a toast message to the user:

// Update car
updateCar(car, link) {
  fetch(link, 
  { method: 'PUT', 
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(car)
  })
  .then( res =>
    toast.success("Changes saved", {
      position: toast.POSITION.BOTTOM_LEFT
    }) 
  )
  .catch( err => 
    toast.error("Error when saving", {
      position: toast.POSITION.BOTTOM_LEFT
    }) 
  )
}

4. Add the Save button to the table rows. When the user presses the button, it calls the updateCar function and passes two arguments. The first argument is row, which is all values in the row as an object (=car object). The second argument is value, which is set to be _links.href.self, which will be the URL of the car that we need in the request:

const columns = [{
  Header: 'Brand',
  accessor: 'brand',
  Cell: this.renderEditable
}, {
  Header: 'Model',
  accessor: 'model',
  Cell: this.renderEditable
}, {
  Header: 'Color',
  accessor: 'color',
  Cell: this.renderEditable
}, {
  Header: 'Year',
  accessor: 'year',
  Cell: this.renderEditable
}, {
  Header: 'Price €',
  accessor: 'price',
  Cell: this.renderEditable
}, {
  id: 'savebutton',
  sortable: false,
  filterable: false,
  width: 100,
  accessor: '_links.self.href',
  Cell: ({value, row}) => 
    (<button onClick={()=>{this.updateCar(row, value)}}>
     Save</button>)
}, {
  id: 'delbutton',
  sortable: false,
  filterable: false,
  width: 100,
  accessor: '_links.self.href',
  Cell: ({value}) => (<button onClick=
    {()=>{this.onDelClick(value)}}>Delete</button>)
}]

If you now edit the values in the table and press the Save button, you should see the toast message and the updated values are saved to the database: