Pnpjs: Looking for good SP examples with React hooks

[Ofer-Gal]

Category

• [ ] Enhancement
• [ ] Bug
• [ ] Question
• [x] Documentation gap/issue

Version

Please specify what version of the library you are using: [ latest ]

Please specify what version(s) of SharePoint you are targeting: [ SPO ]

Can't figure out how to use pnp js to get list items in a SPFx web part that is not a class because I use Hooks.
the TS linter gives me all kinds of errors.

[koltyakov]

With hooks, PnPjs usage is identical to any other promise-based getting data, PnPjs is no different at all. useState for updating the state, useEffect for component did mount and so on. It's not about PnPjs but how to use Hooks in React in general.

[patrick-rodgers]

Can you provide your code or the errors you are seeing? This isn't enough for us to really help out here.

[ncmadhan1989]

https://www.c-sharpcorner.com/blogs/reacthooks-with-spfx

[Ofer-Gal]

@ncmadhan1989 Thank you
I created your web part with new Yo and your code verbatim
It does not render because of this error:

------------------------------------------------------------------------------------
Error - [tsc] src/webparts/spfxReactHooksCrud/components/mySpListCollection.tsx(7,12): error TS2339: Property 'web' does not exist on type 'SPRest'.
---------------------------------------------------------------------

the line is:

sp.web.lists.getByTitle("ProjectStatus").items.select('Title', 'Id', 'MileStone').get().then((items) => {

project.json shows "@pnp/sp": "^2.0.0", and all the SPFx pieces are "1.10.0"
Maybe there was a change?
Thank you for your help.
### Update
Found a fix in sharepoint.stackexchange
```
import { sp } from "@pnp/sp/presets/all";
````
Maybe you want to update your blog.
Thanks again

Maybe one more question
What is I want to show items in a list in another site collection (same tenant)?
I am assuming I need to instantiate a web object and go from there.

[ncmadhan1989]

@Ofer-Gal Yeah i have used pnp/sp 1.38 version, its my old blog
yeah use
const web = new Web(siteUrl);

[Ofer-Gal]

Thank you

[Ofer-Gal]

const web = new Web(siteUrl); (before the call to web.lists.getByTitle( .... )
Now I get "Only a void function can be called with the 'new' keyword.ts(2350) "

So I tried without the 'new'
const web = Web(siteUrl); and it works fine 💯 Wonder why