A Complete Guide to Getting and Setting Fields Value using PnP JS in SPFx

This article provides a complete guide to getting and setting SharePoint list field values using PnP JS in the SharePoint Framework (SPFx).

You can manage various field types, including:

Single line of text
Multiple lines of text
Choice (single and multi-select)
Number
Currency
Date and Time
Lookup (single and multi-select)
Yes/No
Person or Group (single and multi-select)
Hyperlink
Picture
Managed Metadata

⚙️ Install Dependencies

Install the PnP JS library in your SPFx project:

npm install @pnp/sp --save

Import the PnP modules at the top of your file:

import { sp } from "@pnp/sp/presets/all";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import "@pnp/sp/site-users";

🧩 Get and Set Values for Different Field Types

Single Line of Text

let textValue: string = item["Title"];
const list = sp.web.lists.getByTitle("Test");
await list.items.getById(1).update({
  Title: textValue,
});

Multiple Lines of Text (Plain Text)

let multipleLineTextValue: string = item["MultipleLinesText"];
await list.items.getById(1).update({
  MultipleLinesText: multipleLineTextValue,
});

Multiple Lines of Text (Enhanced Rich Text)

let multipleLineHtmlValue: string = item["MultipleLinesHTML"];
await list.items.getById(1).update({
  MultipleLinesHTML: multipleLineHtmlValue,
});

Choice (Single Selection)

let singleChoice: string = item["Location"];
await list.items.getById(1).update({
  Location: singleChoice,
});

Choice (Multiple Selection)

let multiChoice: string[] = item["Locations"];
await list.items.getById(1).update({
  Locations: { results: multiChoice },
});

Number

let numberValue: number = item["Quantity"];
await list.items.getById(1).update({
  Quantity: numberValue,
});

Currency

let amountValue: number = item["Amount"];
await list.items.getById(1).update({
  Amount: amountValue,
});

Date and Time

let dateValue: Date = item["Birthday"];
await list.items.getById(1).update({
  Birthday: dateValue,
});

Lookup (Single Selection)

let lookupValue: number = item["ColorId"];
await list.items.getById(1).update({
  ColorId: lookupValue,
});

Lookup (Multiple Selection)

let lookupValues: number[] = item["ColorsId"];
await list.items.getById(1).update({
  ColorsId: { results: lookupValues },
});

Yes/No (Boolean)

let yesNoValue: boolean = item["Inactive"];
await list.items.getById(1).update({
  Inactive: yesNoValue,
});

Person or Group (Single Selection)

const user = await sp.web.ensureUser(item["OwnerId"]);
await list.items.getById(1).update({
  OwnerId: user.data.Id,
});

Person or Group (Multiple Selection)

let peopleIds: number[] = item["OwnersId"];
await list.items.getById(1).update({
  OwnersId: { results: peopleIds },
});

Hyperlink

let linkValue: object = item["Reference"];
await list.items.getById(1).update({
  Reference: {
    "__metadata": { type: "SP.FieldUrlValue" },
    Description: linkValue["Description"],
    Url: linkValue["Url"],
  },
});

Picture

let imageValue: object = item["Image"];
await list.items.getById(1).update({
  Image: imageValue,
});

Managed Metadata (Single Selection)

let termValue: any = item["Tag"];
await list.items.getById(1).update({
  Tag: {
    "__metadata": { type: "SP.Taxonomy.TaxonomyFieldValue" },
    Label: termValue.Label,
    TermGuid: termValue.TermGuid,
    WssId: -1,
  },
});

Managed Metadata (Multiple Selection)

let termsValue: any = item["Tags"];
await list.items.getById(1).validateUpdateListItem([{
  FieldName: "Tags",
  FieldValue: JSON.stringify(termsValue),
}]);

📂 GitHub Sample Project

View full SPFx project on GitHub:A Complete Guide to Getting and Setting Fields Value using PnP JS in SPFx

GitHub

✅ Summary

The PnP JS library provides a clean, promise-based syntax for accessing and updating SharePoint list data.
By using the right field value type (string, boolean, array, or object), you can easily handle any SharePoint column type in your SPFx web parts.