Using PnPJS Library to display list of data

Question

I'm building a SPFX React webpart. I currently have the webpart on my SharePoint site's workbench page.

Here is the code that I'm currently using:

  private _renderListAsync(): void {
    // Local Enviroment
    if (Environment.type === EnvironmentType.Local) {
        console.log('This is local!');
    }
    else if (Environment.type === EnvironmentType.SharePoint || Environment.type === EnvironmentType.ClassicSharePoint) {
        console.log('This is Sharepoint!!');
            pnp.sp.web.lists.getByTitle("Data").items.get().then((items: any[]) => {
                items.map((item) => {
                    console.log(item);
                    console.log(item.Full_Name);
                    return item.Full_Name;
                })

        });
    }
}

In my console I'm able to see all the data from that item. And if I do a console.log(item.Full_Name) I see all the data there. However when I try to return the item on the page it displays null. Any ideas on how to fix this?

Answer 1

Define interface to store your list data.

export interface IReactItem {
  ID: string,
  Title: string,
  Address: string
  Pic: {
    Description: string,
    Url: string
  }
}

init data in

public componentDidMount() {
// your pnp code

var reactHandler = this;
    this.props.context.spHttpClient.get(`${this.props.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('TestList')/items?select=ID,Title,Address,Pic`,
      SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {
        response.json().then((responseJSON: any) => {
          reactHandler.setState({
            items: responseJSON.value.sort()
          });
        });
      });

Render in render

return (
      <div className={styles.reactSpFx}>

        <div className={styles.container}>        
          <div className={styles.img} title="Rencore logo">content</div>         

          {(this.state.items || []).map((item, index) => (
            <div key={item.ID} className={(index % 2 == 0) ? styles.rowA : styles.rowB}>{item.Title}
              {index % 2}
              {this.renderPic(item)}
              //your render template
            </div>
          ))}
        </div>