How to get SP lists using React, getting blank

Question

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> = 
      React.createElement(
      GetSpLists,
      {
        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 ){
     super(props);
     this.state={sitecontents: [{"Lists":""}]};
      GetSpLists.siteurl=this.props.websiteUrl;
    }
    
    public componentDidMount() {
      let reactcontexthandiler= this;
      jquery.ajax({
        url: `${GetSpLists.siteurl}/_api/web/lists?select=Title&$filter=Hidden eq true`,
        type:"GET",
         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 (
      <div>
        <ol>
        {
          this.state.sitecontents.map(function(mylists,mylistitemkey){
            return(
              <li>
              <span>{mylists.Lists}</span>
              </li>);
              })
        }
      </ol>
      </div>
      
    );
  }
}

Please find the output which it shows for the above piece of code

any assistance please why its getting blank

Answer 1

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}>
            <span>{singleList.Title}</span>
        </li>
    );
})

Answer 2

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.