Trying to get data from SharePoint online using spfx react ..

const { siteurl } = this.props;

let requestUrl = siteurl.concat(
// Get users with givenName, surname, or displayName
  .get(requestUrl, SPHttpClient.configurations.v1)
  .then(response => {
    return response.json();
  .then(json => {
    // Prepare the output array

    // Log the result in the console for testing purposes
    // Map the JSON response to the output array
    json.value.map((item: any) => {});
  .catch(error => {

getting error --

ShopingCart.tsx:65 Uncaught (in promise) TypeError: Cannot read property 'get' of undefined at ShopingCart.fetchDatafromSharePointList (ShopingCart.tsx:65) at ShopingCart.

  • quick question: why do you write your requests manually and don't use instead the fluent API provided by pnp.github.io/pnpjs/pnpjs/docs ? – baywet Jan 25 at 13:31
  • Can I use sppnp Js with react ? Or what will be the best practices to fetch data from SharePoint online spfx react . – BISWANATH HALDER Jan 25 at 16:07
  • react is a UI framework to help you render and display the information on the screen to put it roughly. pnpjs is a fluent API wrapping the REST API. They do not conflict or overlap at all, and combining them for SPFx projects is usually the suggested approach. – baywet Jan 25 at 16:36
  • I am having problem while looping ... getting always extra button . please help . <div key={myitems1.Id}> <span>{myitems1.Item_x0020_Name}</span> <button onClick={e => this.dosometing(myitems1.Id)}> Offline </button> </div> Getting always extra and – BISWANATH HALDER Jan 25 at 18:53

Even though this doesn't directly answer the question the recommendation would be to leverage pnpjs fluent API instead of crafting the requests manually.
This reduced maintenance burden as well as the risk of errors.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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