Skip to main content
1 of 4

Getting error 'response.map is not a function' trying to map a list items with managed metadata fields in spfx react solution

I am trying to get items from a links list with managed metadata. I am getting an error 'response.map is not a function'. I have used the sample from this the following answer to get the data using RenderListDataAsStream (SPFX - cannot get actual label of managed metadata list field). I can get the data - I can see it in the console - so I know that the caml query works, but can't seem to map the results, as I get the error 'response.map is not a function'

There is my code:

import * as React from 'react';
import styles from './LinksWp.module.scss';
import { ILinksWpProps } from './ILinksWpProps';
import { escape } from '@microsoft/sp-lodash-subset';
import pnp from "sp-pnp-js";
import { ClassListItems } from './ClassListItem';
import { ISPListItem } from './IListItems';
import { sp, RenderListDataParameters, RenderListDataOptions } from '@pnp/sp';

export default class LinksWp extends React.Component<ILinksWpProps, any> {

public constructor(props:ILinksWpProps,any)
{
super(props);
this.state={
items:[]
}
}



  public render(): React.ReactElement<ILinksWpProps> {
    return (
      <div><h1>{this.props.description}</h1>
      <div>{this.state.items.map(function(item:ISPListItem){
      return(
      <div>
       <span><a href={item.URL.Url}>{item.URL.Description}</a></span>
      </div>
    )

})}</div>
      
      
      </div>
      
    );
  }

public componentDidMount(){

  this._getListItems();
}

private _getListItems():void

{

  /*
  pnp.sp.web.lists.getByTitle('Quick Links').items.get()
  
  .then
  ((response)=>{
   let listItemCollection = response.map(item=>new ClassListItems(item));
   this.setState({items: listItemCollection});
  }
  
)*/

pnp.sp.web.lists.getByTitle('Quick Links').renderListDataAsStream({
  RenderOptions: RenderListDataOptions.ListData,
  ViewXml :  `<View><Query><Where><Eq><FieldRef Name='Function' />
  <Value Type='TaxonomyFieldTypeMulti'>Group IT</Value></Eq></Where></Query><ViewFields>
  <FieldRef Name='URLwMenu2' /><FieldRef Name='Region' />
  <FieldRef Name='Function' /><FieldRef Name='Geography' />
  </ViewFields><QueryOptions />
  </View>`
}).then
((response)=>{
  console.log(response)
   let listItemCollection = response.map(item=>new ClassListItems(item));
   this.setState({items: listItemCollection});
  }
  
)

}
}

I have defined an interface and a class for this as well

import { ISPListItem } from "./IListItems"

export class ClassListItems {

public URL;
public Region;
public Function;
public Geography;

constructor(item: ISPListItem) {

this.URL = item.URL;
this.Region = item.Region;
this.Function = item.Function;
this.Geography = item.Geography;

}
}

export interface ISPListItem{

URL;
Region : string;
Function : string;
Geography : string;

}