Adding into sharepoint list using react js spfx webpart

Question

I am using this code in my webpart to insert into the sharepoint list with list name, but moving this code into production environment is creating an issue since its forming the wrong url for inserting into the list, The url in production is https://abcportal.sharepoint.com/sites/SolutionBook/SitePages/_api/web/lists/getByTitle('Smart%20City%20IAQ%20Demo%20Requests')?$select=ListItemEntityTypeFullName

But in local environment is working fine it forms this url https://abcportal.sharepoint.com/sites/solutionbooktest/_api/web/lists/getByTitle('Smart City IAQ Demo Requests')/items

In the production environment URL SitePages is coming automatically, how to remove it?

-------Code--------- public insertEmailToList() {

pnp.sp.web.lists.getByTitle("Smart City IAQ Demo Requests").items.add({
  Title: this.state.Email
}).then(r => {
  this.setState({ ButtonActive: false });
});

}

or Is there any way to insert into sharepoint list using URL of the list?

score 1 · Answer 1 · answered Feb 18 '22 at 12:19

You need to establish the SPFx context for PnPJs. This can be done in the onInit() method of your web part through the setup() method imported from @pnp/core or @pnp/sp.

Using @pnp/core setup

import { setup as pnpSetup } from "@pnp/core";

// ...

protected onInit(): Promise<void> {

  return super.onInit().then(_ => {

    // other init code may be present

    pnpSetup({
      spfxContext: this.context
    });
  });
}

// ...

Using @pnp/sp setup

import { sp } from "@pnp/sp/presets/all";

// ...

protected onInit(): Promise<void> {

  return super.onInit().then(_ => {

    // other init code may be present

    sp.setup({
      spfxContext: this.context
    });
  });
}

// ...

Refer to this link for more details.

Adding into sharepoint list using react js spfx webpart

1 Answers1