0

I am currently refreshing my knowledge within SharePoint Framework, trying to show list items in list from Fluent UI using React as a framework.

Right now I am struggling with SharePoint Context API when trying to output data from a SharePoint List because I get this error message in my app:

enter image description here

Here are my code snippets:

My React component (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';


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

export interface IListItems{
    items: IListItemState[];
}

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

        // //Populate list items
        this.listItems = [];
            for (let i = 0; i < 10; i++) {
                this.listItems.push({
                  Title: `TEST ${i}`,
                  ManufacturingCost: 12,
                  Retail_x0020_Price: i * 2,
                });
        }

        
        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 _getListData() : Promise<IListItems>{
        return this.context.spHttpClient.get(
            this.context.pageContext.web.absoluteUrl + 
            "/_api/web/lists/GetByTitle('Tulips')/Items", SPHttpClient.configurations.v1)
            .then((response: SPHttpClientResponse) => {
                return response.json();
            });
    }

    public _renderList(){
        this._getListData().then(response => {
            console.log(response);
            
        })
    }
 
    public render(): JSX.Element {
        console.log(this.state.items);
        this._renderList()
        return (
            <div>
                <DetailsList 
                    items={this.state.items}
                    columns={this.listColumns}/>
            </div>
        )
    }
}

My main component(CrudReact.tsx):

import * as React from 'react';
import styles from './CrudReact.module.scss';
import { ICrudReactProps } from './ICrudReactProps';
import { List } from './List';

export default class CrudReact extends React.Component<ICrudReactProps, {}> {
  public render(): React.ReactElement<ICrudReactProps> {
    return (
      <div className={ styles.crudReact }>
        <h1>CRUD React</h1>
        <List />
      </div>
    );
  }
}

Here is the webpart entry code(CrudReactWebPart.ts):

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import * as strings from 'CrudReactWebPartStrings';
import CrudReact from './components/CrudReact';
import { ICrudReactProps } from './components/ICrudReactProps';

export interface ICrudReactWebPartProps {
  description: string;
}

export default class CrudReactWebPart extends BaseClientSideWebPart<ICrudReactWebPartProps> {

  public render(): void {
    const element: React.ReactElement<ICrudReactProps> = React.createElement(
      CrudReact,
      {
        description: this.properties.description,
        context: this.context
      }
    );

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

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

Interface code(ICrudReactProps.ts):

import { WebPartContext } from "@microsoft/sp-webpart-base";

export interface ICrudReactProps {
  description: string;
  context: WebPartContext;
}

I appreciate if someone can help me sort out this problem, because I have done exactly like most people have shown how to do. Want to know where I have done wrong.

Thanks.

1 Answer 1

1

Create props interface for List component like:

export interface IListItemProps {
   context: any;
}

Use it in class declaration like:

export class List extends React.Component<IListItemProps, IListItems> {
   ...
}

Change render() in CrudReact.tsx like:

public render(): React.ReactElement<ICrudReactProps> {
    return (
      <div className={ styles.crudReact }>
        <h1>CRUD React</h1>
        <List context={this.props.context} />
      </div>
    );
}

Then change API call in List.tsx like:

this.props.context.spHttpClient.get()

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.