Murali Kris

Murali Kris

  • 1.4k
  • 254
  • 46.6k

Getting blank values in spfx using React

Jul 13 2023 2:34 PM

Hi Team,

I have followed a youtube vedio (part 2 as well) to get sp list items in to SPFX webpart, which is working fine, in the same way i have tried to get SP Site contens (Get SP lists) list, which is getting blank values.

Here is the webpart.TS file 

public render(): void {
    const element: React.ReactElement<IGetSpListsProps> = React.createElement(
        websiteUrl: this.context.pageContext.web.absoluteUrl //here i am getting the site URL which is working fine

    ReactDom.render(element, this.domElement);

After that Framework Interface file 

export interface IGetSpListsProps {
  description: string;
  websiteUrl: string; //React FrameWork interface file initialized for Site URL

Now TSX file from Component

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 (

Every thing is fine but i am getting blank values from SP. please check the below screen shot for output that i am getting.

Please assist me what is the issue and why its not displaying.

Answers (1)