How to add data to SharePoint list with SPFx using React Functional component?

thedeepponkiya 0
Viewed 41

I have created an SPFx React solution with the Class components and performed CRUD operations with the SharePoint list.

I have used @pnp/sp for SharePoint API calls.

Now, I need to perform CRUD operations in the SPFx React solution with the Functional components.

Can anyone suggest useful links for the same?

Thanks

sharepointframework sharepoint-list react-functional-component spfx sharepoint-online
1 Answers

Its the same in Functional components.

import * as React from 'react';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import { SPFI } from '@pnp/sp';

const SimpleFunctionComponent:React.FunctionComponent<{sp: SPFI}> = ({sp}) => {

    const [ items, setItems ] = React.useState<string[]>([]);

    React.useEffect(() => {

        const init = async () => {
            const items: any[] = await sp.web.lists.getByTitle("Test").items();
            setItems(items.map(i => i["Title"]));
        };

        if(sp) {
            init();
        }   
    }, [sp]);

    return <div>
        {
            items.map(i => <div>{i}</div>)
        }
    </div>
}

export { SimpleFunctionComponent }

You have the SPFI property (you can define and init it in the webpart.ts file). Then in the component itself you can have an useEffect hook to load items for example. The hook I use in the example will load everytime the "sp" property is changing. The result will look like this:

enter image description here

devil_inside0
Related