How to Render SharePoint List Items in a Web Part Using Fluent UI

If you’re struggling to render SharePoint list items in a SharePoint Framework (SPFx) web part using React and Fluent UI, this guide will take you step-by-step through a working example. Whether you are getting undefined errors or your list items are not being passed to your .tsx component correctly, this post will help you build a functional solution from scratch.

Introduction

In this post, I will walk you through the process of:

1. Setting up the SPFx web part.
2. Fetching list items from SharePoint using PnPjs in your .ts file.
3. Passing those list items as props to your .tsx component and rendering them using React.

Step 1: Setting up the SPFx Web Part

First, we need to create a basic SPFx web part using the Yeoman generator and install PnPjs for list operations.

1. Create a New SPFx Project

Open your terminal and create a new SPFx project using Yeoman. Select React as the framework when prompted.

yo @microsoft/sharepoint

Make sure to configure your environment for React.

2. Install PnPjs

PnPjs is a powerful library that makes working with SharePoint much easier. We’ll use it to fetch items from a SharePoint list.

npm install @pnp/sp @pnp/spfx-controls-react --save

Step 2: Fetching List Items in the .ts File

Now, we’ll configure the main TypeScript file (WebPart.ts) to fetch items from a SharePoint list and pass them to the React component.

1. Import Required Libraries

In your WebPart.ts file, import the necessary libraries for PnPjs and React.

import { spfi, SPFx } from '@pnp/sp';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import PnPGetListItems, { IPnPGetListItemsProps } from './components/PnPGetListItems';

2. Initialize PnPjs in onInit()

Next, initialize PnPjs inside the onInit() method so that you can use it to fetch list items.

protected onInit(): Promise<void> {
  spfi().using(SPFx(this.context));
  return super.onInit();
}

3. Create a Function to Fetch List Items

Create a private function that fetches the list items and returns them as a Promise. Then call this function inside the render() method and pass the data to your React component.

private async _getListItems(): Promise<any[]> {
  try {
    const items: any[] = await spfi().web.lists.getByTitle('YourListName').items();
    return items;
  } catch (error) {
    console.error('Error fetching list items: ', error);
    return [];
  }
}

public async render(): Promise<void> {
  const items: any[] = await this._getListItems();

  const element: React.ReactElement<IPnPGetListItemsProps> = React.createElement(
    PnPGetListItems,
    {
      items: items // Passing list items to the React component
    }
  );

  ReactDom.render(element, this.domElement);
}

In the above code:

• Replace 'YourListName' with the actual name of your SharePoint list.
• The _getListItems() function fetches the list items, and render() passes them as props to the PnPGetListItems React component.

Step 3: Rendering List Items in React

Now that we are passing the list items to the .tsx file, let’s handle the rendering inside the React component.

1. Define Props for the Component

In the PnPGetListItems.tsx file, define an interface for the props that will hold the list items.

export interface IPnPGetListItemsProps {
  items: any[];
}

2. Render the List Items

Next, write the logic to display the list items. For this example, we will render the list items in a table format.

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

const PnPGetListItems: React.FC<IPnPGetListItemsProps> = (props) => {
  return (
    <div>
      <h2>SharePoint List Items</h2>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          {props.items.map((item) => (
            <tr key={item.Id}>
              <td>{item.Id}</td>
              <td>{item.Title}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default PnPGetListItems;

In this component:

• The props.items are rendered inside a simple HTML table.
• Each list item is represented by a row showing its ID and Title.

Debugging Tips: Checking State and Props

To ensure that the list items are being passed correctly, you can add console.log statements inside the component to check the value of props.items.

console.log(props.items);

This will help you verify if the data is being passed and mapped correctly in the component.

Testing the Web Part

After completing the setup, run the following command to serve your web part and test it in the SharePoint Workbench.

gulp serve

When you open the SharePoint Workbench, you should see your web part and the items from your list rendered on the screen in a table format.

Conclusion

In this guide, we built an SPFx web part that fetches SharePoint list items using PnPjs and renders them in a React component. By passing the list items from the .ts file to the .tsx component via props, you can ensure smooth data flow and proper rendering on the screen.

If you’re still encountering undefined errors or trouble rendering the list, double-check the following:

• Ensure the list name is correct.
• Use console.log to debug the props and state.