SharePoint List Items CRUD Operations Demo Using PnPJS In React based SPFx Webpart

import * as React from 'react';  
import styles from './SampleDemo.module.scss';  
import { ISampleDemoProps } from './ISampleDemoProps';  
import { escape } from '@microsoft/sp-lodash-subset';  
  
//import library  
import {  PrimaryButton, Stack,MessageBar, MessageBarType } from 'office-ui-fabric-react';  
import { sp, IItemAddResult, DateTimeFieldFormatType } from "@pnp/sp/presets/all";  
  
//create state  
export interface ISampleDemoState {  
 showmessageBar:boolean; //to show/hide message bar on success  
 message:string; // what message to be displayed in message bar  
 itemID:number; // current item ID after create new item is clicked   
}  
  
export default class SampleDemo extends React.Component<ISampleDemoProps, ISampleDemoState> {  
  
  // constructor to intialize state and pnp sp object.  
  constructor(props: ISampleDemoProps,state:ISampleDemoState) {  
    super(props);  
    this.state = {showmessageBar:false,message:"",itemID:0};  
    sp.setup({  
      spfxContext: this.props.spcontext  
    });  
  }  
  
  public render(): React.ReactElement<ISampleDemoProps> {  
    return (  
      <div className={ styles.sampleDemo }>  
        <div className={ styles.container }>  
          <div className={ styles.row }>  
            <div className={ styles.column }>  
              <span className={ styles.title }>Welcome to PnP JS List Items Operations Demo!</span>  
            </div>  
          </div>  
        </div>  
        <br></br>  
        <br></br>  
        <Stack horizontal tokens={{childrenGap:40}}>    
                <PrimaryButton text="Create New Item" onClick={()=>this.createNewItem()}  />    
                <PrimaryButton text="Get Item" onClick={()=>this.getItem()} />    
                <PrimaryButton text="Update Item" onClick={()=>this.updateItem()} />    
                <PrimaryButton text="Delete Item" onClick={()=>this.delteItem()} />    
             </Stack>    
             <br></br>  
            <br></br>  
             {this.state.showmessageBar &&  
             <MessageBar   onDismiss={()=>this.setState({showmessageBar:false})}  
                dismissButtonAriaLabel="Close">  
                  {this.state.message}  
            </MessageBar>  
            }  
      </div>  
    );  
  }  
  
  // method to use pnp objects and create new item  
  private async createNewItem(){  
    const iar: IItemAddResult = await sp.web.lists.getByTitle("DemoList").items.add({  
      Title: "Title " + new Date(),  
      Description: "This is item created using PnP JS"  
    });  
    console.log(iar);  
    this.setState({showmessageBar:true,message:"Item Added Sucessfully",itemID:iar.data.Id});  
  }  
  
  // method to use pnp objects and get item by id, using item ID set from createNewItem method.  
  private async getItem(){  
    // get a specific item by id  
    const item: any = await sp.web.lists.getByTitle("DemoList").items.getById(this.state.itemID).get();  
    console.log(item);  
    this.setState({showmessageBar:true,message:"Last Item Created Title:--> " + item.Title});  
  }  
  
  // method to use pnp object udpate item by id, using item id set from createNewItem method.  
  private async updateItem(){  
  
    let list = sp.web.lists.getByTitle("DemoList");  
    const i = await list.items.getById(this.state.itemID).update({  
      Title: "My Updated Title",  
      Description: "Here is a updated description"  
    });  
    console.log(i);  
    this.setState({showmessageBar:true,message:"Item updated sucessfully"});  
  }  
  
  // method to use pnp object udpate item by id, using item id set from createNewItem method.  
  private async delteItem(){  
    let list = sp.web.lists.getByTitle("DemoList");  
    var res = await list.items.getById(this.state.itemID).delete();  
    console.log(res);  
    this.setState({showmessageBar:true,message:"Item deleted sucessfully"});  
  }  
} 

For understanding purposes, I have added comments in the above code.

Step - Testing the webpart

Let us see this web part in the action.

Run gulp serve,

gulp serve

Open the SharePoint workbench page.

https://spevents.com/sites/spsahmd2019/_layouts/15/workbench.aspx

Add a target web part, and when the page loads, we will see the below output,

Click on Create New Item.

Below is an entry added to my Demo List.

Click on Get-Item.

Click on Update Item.

Updated entry in demo list.

Click on Delete item.

We can see in the list entry is deleted.

Conclusion

We have seen the basic use cases on how-to-do list items operations with PnP JS and React. I would suggest looking at the usage of state to show the hiding message bar and dynamic text in the message bar. This is a very common use case we will have to do for showing success/failure messages for custom forms in SPFx.

I hope this helps...Happy coding...!!!