I am trying to get SP Site contents list (Get SP lists) using React component framework but getting blank, Please find the below code file

//Webpart file code

    public render(): void {
    const element: React.ReactElement<IGetSpListsProps> = 
        description: this.properties.description,
        websiteUrl: this.context.pageContext.web.absoluteUrl
    );ReactDom.render(element, this.domElement);}

//Component Interface file code

    export interface IGetSpListsProps {
  description: string;
  websiteUrl: string;}

//Component TSX file code

    export interface IGetSpListsState{
  sitecontents: [{"Lists":""}]

export default class GetSpLists extends React.Component<IGetSpListsProps, IGetSpListsState> {
    static siteurl:string =""; //static member variable
    public constructor (props :IGetSpListsProps, state:IGetSpListsState ){
     this.state={sitecontents: [{"Lists":""}]};
    public componentDidMount() {
      let reactcontexthandiler= this;
        url: `${GetSpLists.siteurl}/_api/web/lists?select=Title&$filter=Hidden eq true`,
         headers:{'Accept': 'application/json;odata=verbose;'},
         success : function (resultData){
          reactcontexthandiler.setState({sitecontents: resultData.d.results});
         error: function (jqXHR, textStatus, errorthrown){
    public render(): React.ReactElement<IGetSpListsProps> {
      return (

Please find the output which it shows for the above piece of code enter image description here

any assistance please why its getting blank

2 Answers 2


After you

reactcontexthandiler.setState({sitecontents: resultData.d.results});

the original array you initialized in the constructor of [{"Lists":""}] is gone, it's completely replaced by the array of SPList JSON objects that are in resultData.d.results. And for those, in your query you added $select=Title so those have only the Title property. So there is nothing in your state that has a .Lists property.

So when you try to access that property in your render function, it is undefined and therefore shows up blank in the rendered UI.

You should change your render map function to be this:

this.state.sitecontents.map((singleList, index) => {
    return (
        <li key={index}>
  • Dylan really appreciate for your reply. also the piece of code is working fine. on top of that sitecontents: [{"Lists":""}] is replaced with sitecontents: [{"title":""}] then its working. thank you Dylan Jul 14 at 1:54
  • Glad to help! If it worked, please consider marking this as the accepted answer. Jul 14 at 13:31

I have updated the variable as per the SP API because it returns "title", where I took like "Lists" so replaced with title then its working. after changing with title using Dylan code also working.

Your Answer

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

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