Adding into sharepoint list using react js spfx webpart - reactjs

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?

Answer 1

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.