Good morning every SharePoint fellow ! I know this question has surely already been posted, but i could'n't found a clear answer.


I am programming a custom WebPart for Sharepoint online with all the good tools (react, spfx, etc..). I am really new to all this process.

I have a SP Document Library with a custom column called "UserId". This column will help to know if the user has already read the doc.

My custom WebPart will be kind of a "Read/Unread" tool. This WP will read that library and fetch all the items, witch the current user didn't already read. I would like to trigger the items where my current user's ID does not appear in my UserId column. I am quite confident with it, but i am blocking on one simple thing :

My question : How to retrieve the current User's ID?

What i did

So I did create a project, according the tutorial on the crud react video. Now, i would like to get my current user id. I did code a method using pnp in my MyCustomWPWebPart.ts :

import pnp from '@pnp/pnpjs';
public getMyID(){
    var myID = "";
          sp: {
            headers: {
                "Accept": "application/json; odata=verbose"

    pnp.sp.profiles.myProperties.get().then(d => {
       var properties = d.UserProfileProperties.results;
       var myID = properties[44].Value.split(',')[0].substr(3);// get object 44's value ("CN=ID,OU=..."), split it to get the first one, then get rid of the "CN=" and there you go, a nice little 36char ID   
       return myID;

This code works.. but i think i did'nt get it in the right place. And moreover, i don't know how to use it in my MyCustomWP.tsx file. I don't know how i can call my function getMyID.

What I would like

I would like to be able to retrieve this userId in my MyCustomWP.tsx .. and it is quite difficult. What do I do wrong ? Is there any other (simple) way to do it ?

In advance, thank you for your time, I really am a beginner with react and spfx, so i can be really long to understand where everything goes.

2 Answers 2


using @pnp/sp, you can simply get the current user's property using

import { sp } from '@pnp/sp';

 return sp.web.currentUser.get().then((user) => {
            return user;

and store in a state like so:

      currentUser: await getCurrentUser()

The user id used in SharePoint User Fields is not the one your retrieve. It actually is a lookup to a hidden list (User Information List) which exists on your Root Web of your site collection.

The id is unique to a site collection, and will change on every site collection (the id is generated the first time a user appears on the site collection, and increments for each new user)

To retrieve it, you must make a different call.

The following Stack Overflow request seems to suggest to call the web.currentUser.get() endpoint, which is consistent to the REST call I make to get the ID : <sitecollectionuri>/_api/web/currentuser

SPFx - How to get curernt user properties with pnp js core

There, you get a user object with an Id property, this is the one you'll see in SharePoint User Fields.

Hope this helps!

Concerning the React issue about passing values, in SharePoint Framework, a WebPart is made of two React components. The parent, responsible for the property pane and initialization/integration inside SharePoint (for a News WebPart its file name is NewsWebPart.ts), and the child one, responsible for the WebPart rendering itself (same example, called News.tsx).

As with every react component, a parent can give its children values through props. In my case I have this code in NewsWebPart.ts:

public render(): void {
  const element: React.ReactElement<INewsProps > = React.createElement(
      context: this.context,
      id: this.properties.id

  ReactDom.render(element, this.domElement)

Which passes two props to my WebPart: this.context and the one in the property pane: this.properties.id. Note that this code can easily be replaced in a tsx file by return <News context={this.context} id={this.properties.id}/>.

Your snippet responsible for retrieving the user id should be in the child component however, as it is of no concern to the SharePoint integration or the property pane. If you wish to leave it here, just pass the correct variable in the props.

If you do not know how to handle the initialization of your component, you should read more about React Components and their life cycle. React has a very nice Tic Tac Toe tutorial to help understanding the concepts.

  • hello @Gostron and thanks for your answer. I've already seen that bit of code using the import Web from 'sp-pnp-js';, but apparently it's becoming obsolete, that is why i wanted to use the @pnp/pnpjs module. I didn't add that this is working if i write it in my MyCustomWPWebPart.ts file, but i don't know how to use it from my MyCustomWP.tsx .
    – Gaelle
    Commented May 22, 2018 at 12:01
  • You can actually make the call yourself without using pnp. Your question may not be precise enough to be answered directly. Do you wish to know how to query/filter list items in your webpart ? Please include relevant snippets of your code to simplify any correction / addition to your question Commented May 22, 2018 at 12:03
  • Thanks @Gostron, i've edited my thread, so maybe it is clearer. please tell me if it is. Thanks ;)
    – Gaelle
    Commented May 22, 2018 at 13:00
  • I did the same, not sure if I answered on the spot :p Commented May 22, 2018 at 13:23
  • Seems a bit clearer, but effectively i got a big train to catch in react :D I'm gonna check how i can pass the props and where exactly should i write my getMyID function. But, i am not really sure of the code itself, because i am taking the current user id from a really dirty object : d.UserProfileProperties.results[44] ... So if you have a better way of doing it @Gostron, i'll be really thankful :D
    – Gaelle
    Commented May 22, 2018 at 13:36

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.