Rendering SharePoint List Items with SPFx, React, and PnPjs

Introduction

In this guide, we explore how to render SharePoint list items in an SPFx web part using React and PnPjs. The code demonstrates how to fetch data from a SharePoint list and display it in a web part component. We’ll walk through the structure of the code and explain each key part in detail.

Code Breakdown

Web Part (TS File)

1. Imports

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import { PropertyPaneTextField, type IPropertyPaneConfiguration } from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import * as strings from 'ReactRenderListPrarmeTrizadoWebPartStrings';
import ReactRenderListPrarmeTrizado from './components/ReactRenderListPrarmeTrizado';
import { IReactRenderListPrarmeTrizadoProps } from './components/IReactRenderListPrarmeTrizadoProps';
import { spfi, SPFx } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

Here, we’re importing necessary libraries:

PnPjs for SharePoint API access.
React and ReactDOM for UI.
SPFx Core and Property Pane for web part configuration.

2. SPFx Web Part Class

export default class ReactRenderListPrarmeTrizadoWebPart extends BaseClientSideWebPart<IReactRenderListPrarmeTrizadoWebPartProps> {
  public sp: any;
  public items: any[];

The class extends BaseClientSideWebPart and includes two variables:

sp for the PnPjs configuration.
items to store the fetched list data.

3. Rendering and Fetching Items

public render(): void {
    this.getItems(this.sp, { nome: "MyList", campos: ["Title", "Description"] }).then(() => {
      const element: React.ReactElement<IReactRenderListPrarmeTrizadoProps> = React.createElement(
        ReactRenderListPrarmeTrizado,
        { items: this.items }
      );
      ReactDom.render(element, this.domElement);
    });
}

The render() method:

Calls getItems() to retrieve the list data.
Once data is fetched, renders the ReactRenderListPrarmeTrizado component, passing the list items as props.

4. Fetching List Items

private async getItems(sp: any, lista: any) {
  this.items = await sp.web.lists.getByTitle(lista.nome).items.select(lista.campos)();
}

This method uses PnPjs to fetch list items from SharePoint based on the list name (nome) and fields (campos).

5. PnPjs Initialization

public onInit(): Promise<void> {
  return super.onInit().then(_ => {
    this.sp = spfi().using(SPFx(this.context));
  });
}

In onInit(), PnPjs is configured to use the current SPFx context.

React Component (TSX File)

import * as React from 'react';
import type { IReactRenderListPrarmeTrizadoProps } from './IReactRenderListPrarmeTrizadoProps';

This component takes items as props and renders the SharePoint list items.

export default class ReactRenderListPrarmeTrizado extends React.Component<IReactRenderListPrarmeTrizadoProps, {}> {
  public render(): React.ReactElement<IReactRenderListPrarmeTrizadoProps> {
    const { items } = this.props;

    return (
      <div>
        <h2>List Items</h2>
        <ul>
          {items.map(item => (
            <li key={item.Id}>{item.Title}</li>
          ))}
        </ul>
      </div>
    );
  }
}

The component maps through the items array and renders each list item in a <li> tag.

Conclusion

This article walked you through how to create an SPFx web part that renders SharePoint list items using PnPjs and React. The web part fetches items from a specified list and displays them dynamically.

By breaking down both the TS (web part logic) and TSX (React component) files, you now have a clear understanding of how each part works together to retrieve and display SharePoint data.

edvaldo b. guimarães filho

Rendering SharePoint List Items with SPFx, React, and PnPjs