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, 2019 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 . Jan 25, 2019 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, 2019 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 Jan 25, 2019 at 18:53

1 Answer 1


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 and acknowledge you have read our privacy policy.

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