Create and Update SharePoint List Items in SPFx Using PnPjs

Overview

In this post, we will.

Add and update list items using PnPjs (spfi).
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!