1

I am trying to render a SharePoint List in a DetailsList component from Fluent UI where it renders right amount of rows equal to the length of list items in my list but does not show the content of my list.

This is the result: enter image description here

This is my code (List.tsx):

import * as React from 'react';
import { ICrudReactProps } from '../ICrudReactProps';
import { DetailsList, IColumn } from '@fluentui/react/lib/DetailsList';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { IListItemProps } from './IListItemProps';

export interface IListItemState{
    Title: string;
    ManufacturingCost: number;
    Retail_x0020_Price: number;
}

export interface IListItems{
    items: IListItemState[];
}

export class List extends React.Component<IListItemProps, IListItems> {
    private listColumns: IColumn[];
    private listItems: IListItemState[];
    constructor(props: ICrudReactProps) {
        super(props);
        
        this.listItems = [];

        this.listColumns = [
            { key: 'column1', name: 'Title', fieldName: 'title', minWidth: 100, maxWidth: 200, isResizable: true },
            { key: 'column2', name: 'Manufacturing Cost', fieldName: 'manufacturingCost', minWidth: 100, maxWidth: 200, isResizable: true },
            { key: 'column3', name: 'Retail Price', fieldName: 'retailPrice', minWidth: 100, maxWidth: 200, isResizable: true }
        ];

        this.state = {
            items: this.listItems
        }
    }

    public componentDidMount(): void {
        this._renderList();
    }

    public _getListData() : Promise<IListItemState[]>{
        return this.props.context.spHttpClient.get(
            this.props.context.pageContext.web.absoluteUrl + 
            "/_api/web/lists/GetByTitle('Tulips')/Items", SPHttpClient.configurations.v1)
            .then((response: SPHttpClientResponse) => {
                return response.json().then(data => {
                    console.log(data.value);
                    return data.value;
                });
            });
    }

    public _renderList(){
        this._getListData().then(response => {
            console.log(response);
            response.forEach(item => {
                console.log(item.Title);
                this.state.items.push({
                    Title: item.Title,
                    ManufacturingCost: item.ManufacturingCost,
                    Retail_x0020_Price: item.Retail_x0020_Price
                });
            });
            this.setState({
                items: this.state.items
            });
        })
    }
    
    public render(): JSX.Element {
        const { items } = this.state;
        console.log(this.state.items);
        return (
            <div>
                <DetailsList 
                    items={items}
                    columns={this.listColumns}/>
            </div>
        );
    }
}

I can clearly see my list items I want to show in my SPFx webpart in the console:

enter image description here

Appreciate if someone can help me figure out where I am doing wrong. Thanks.

1 Answer 1

1

Your fieldnames must match the list item properties. Your list items are using:

  • Title
  • ManufacturingCost
  • Retail_x0020_Price

But in your column configuration you are using the fileName values as:

  • title
  • manufacturingCost
  • retailPrice

None of these match. You must match the casing and spelling exactly. So changing your list columns portion of the code to the following should work:

this.listColumns = [
            { key: 'column1', name: 'Title', fieldName: 'Title', minWidth: 100, maxWidth: 200, isResizable: true },
            { key: 'column2', name: 'Manufacturing Cost', fieldName: 'ManufacturingCost', minWidth: 100, maxWidth: 200, isResizable: true },
            { key: 'column3', name: 'Retail Price', fieldName: 'Retail_x0020_Price', minWidth: 100, maxWidth: 200, isResizable: true }
        ];

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.