SharePoint framework React webpart CRUD operations part 2

This is a continuation of the previous blog. In this tutorial we will see the remaining CRUD operations (Read, Update and Delete).

We shall use the same webpart I created in previous blog. Open the ‘SpfxReactCrud.tsx’ file and we will replace the required code into below each method one by one.

Step 1: Read an Item from SharePoint site

Replace the ‘readItem’ method with the below method

Here we are planning to read the last added item, so we need to add the below ‘getLatestItemId’ method which gets the latest item’s ID from my SharePoint site

Hit gulp serve. Yes it reads my last added item ID 9 from my SharePoint list

Step 2: Update an Item in SharePoint site

Here we are going to update the last added item, replace the ‘updateitem’ method with below code

We also need the below supporting method for updating the last added item, so add this ‘getListItemEntityTypeName’ method just below the ‘updateitem’ method

We haven’t declared this yet, so we need to add this string just above the constructor

Hit Gulp serve. And Click ‘Update item’ in the webpart from your SharePoint site workbench

Step 3: Delete an Item in SharePoint site

Finally lets go for how to delete an item from a SharePoint site using REACT. Replace the ‘deleteitem’ method with below code

Then hit Gulp serve. Click ‘Delete item’ button in the webpart from the SharePoint site workbench

Thanks for spending your time reading this blog.

GitHub reference I used