SharePoint  

Create and Update SharePoint List Items in SPFx Using PnPjs

Overview

In this post, we will.

  1. Add and update list items using PnPjs (spfi).
  2. Handle complex field types.
    • Text, Number
    • Choice, MultiChoice
    • Lookup, MultiLookup
    • Person, Multi-Person
    • DateTime, Yes/No
    • Hyperlink or Picture

This continues from our previous blog on reading SharePoint list data with PnPjs.

Use the SP instance

As set up in the previous blog.

import { spfi, SPFI } from "@pnp/sp";
import { SPFx } from "@pnp/sp/presets/all";
let sp: SPFI;
protected async onInit(): Promise<void> {
  await super.onInit();
  sp = spfi().using(SPFx(this.context));
}

Creating a New List Item

  • Add a Simple Item (Text, Number) 
    await sp.web.lists.getByTitle("Employee").items.add({
  Title: "John Doe",
  EmplD: 1001,
  Email: "[email protected]",
});
  • Add Choice / MultiChoice 
    await sp.web.lists.getByTitle("Employee").items.add({
  EmpClass: "Full Time", // Choice field
  EmpSkills: ["React", "PnPjs", "SPFx"], // MultiChoice (add all choice fields in string[])
});
  • Add a Lookup Field: Assume Department is a lookup field pointing to the Departments list. 
    await sp.web.lists.getByTitle("Employee").items.add({
  DepartmentId: 5 // Use the ID of the related List item
});
  • Add Multi-Lookup Field: Assume Departments is a lookup field pointing to the Departments list. 
    await sp.web.lists.getByTitle("Employee").items.add({
  DepartmentsId:  [1, 3, 7]  // IDs of related List items
});
  • Add Person Field 
    await sp.web.lists.getByTitle("Employee").items.add({
  EmployeeId: 15 // User ID (ensure the user exists in the site)
});
  • You can get a user's ID with. 
    const user: IWebEnsureUserResult = await sp.web.ensureUser("i:0#.f|membership|[email protected]");
const userId = user.data.Id;
  • Add Multi-Person Field 
    await sp.web.lists.getByTitle("Employee").items.add({
  UserId:  [15, 16, 17] // Make sure all user IDs belong to users added to the SharePoint site
});
  • Add DateTime and Boolean 
    await sp.web.lists.getByTitle("Employee").items.add({
  JoiningDate: new Date().toISOString(),
  IsActive: true
});
  • Add a Hyperlink or a Picture 
    await sp.web.lists.getByTitle("Employee").items.add({
  ProfileLink: {
    Url: "https://example.com",
    Description: "Personal Website"
  }
});

Updating an Existing Item

  • Update Item by ID 
    await sp.web.lists.getByTitle("Employee").items.getById(10).update({
  Title: "Updated Name",
  IsActive: false
});
  • Update Complex Fields 
    await sp.web.lists.getByTitle("Employee").items.getById(10).update({
  DepartmentId: 3, //Lookup Field
  DepartmentsId: [12, 13], //Multi-Lookup Field
  EmpSkills: ["SPFx", "PnPjs"] //Multi-Choice Field
});

Deleting an Item

await sp.web.lists.getByTitle("Employee").items.getById(10).delete();

Pro Tips

  • Always use field internal names (check List Settings > Column > URL).
  • Use .catch() or try/catch for error handling.
  • Validate user IDs before assigning them to People fields.

Conclusion

You’re now fully equipped to create, update, and delete SharePoint list items in your SPFx web part using the modern PnPjs (spfi) approach. Whether you're working with simple text fields or more complex types like multi-lookup, people pickers, or choice fields, these examples provide a solid foundation for managing every SharePoint column type.

Resources

🔗 PnPjs Official Docs

Coming Up Next

In the final part of this series, we’ll build a reusable form component in SPFx that integrates PnPjs for.

  • Field rendering
  • Validation
  • Form submission to SharePoint

Stay tuned!

Membership not found