Questions tagged [react]

React is a JavaScript library for building user interfaces. It uses a declarative paradigm and aims to be both efficient and flexible.

Filter by
Sorted by
Tagged with
0
votes
1answer
18 views

Failed to load component dependency “react” with failover path “node_modules/react/dist/react.js” in workbench

I am building a SPFX webpart based on SP2016 onward, including SP2019 and online (@microsoft/generator-sharepoint@1.10.0). There is no error in Visual Studio code. When I run "gulp serve", ...
0
votes
2answers
23 views

React webpart OnClick event fail to call a module function

I am working on a React spfx webpart. I inserted below code in my tsx file: <a href="#" className={ styles.button } onClick={ ()=> alert('greeting!') } > <span ...
0
votes
1answer
26 views

React - Sequence of methods

I have written following code to get current user group Ids and later from that Ids I wanted to filter data from SharePoint list. First I want to execute ServiceManager.getRemoteService()....
0
votes
0answers
5 views

How to access data , if I'm getting it in Proxy format?

I'm making an sp.pnp call to get the modified value from the file. I'm getting the result but the obtained data is like the below. Proxy {_data: {…}, _forceCaching: false, odata.metadata: "...
0
votes
1answer
28 views

Getting Invalid hook call Hooks can only be called inside of the body of a function component with SharePoint Framework Template

I get this sp-webpart-workbench-assembly_default.js:26401 [1599066762186][OtherGlobalError.window.onerro] Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a ...
0
votes
1answer
25 views

Check if webPart is added as fullWidth instead Boxed

I've a webPart into React that can be added as full-width or not. My question is: is possible to check if this webPart was added as full-width or not? If I check value of manifest, I can understand ...
1
vote
3answers
51 views

Expanding People and Groups Column using React SPFx

Being new to SPFx , I've not able to retrieve values from people and group Attendee column Below are the steps I followed Defined Attendee in the below interface export interface IListItem{ ...
0
votes
1answer
39 views

Display SharePoint list forms(New/Edit/Display Forms) within SPFX React web part

Is it possible to display/render SharePoint list forms(New/Edit/Display Forms) within SPFX React web part as it is(Not in modal dialog or new window)?
0
votes
0answers
16 views

Is it possible to get calendar events from my Outlook in SharePoint workbench after gulp serve using Microsoft Graph API?

I am using Microsoft Graph API to query Outlook Calendar events and display in SharePoint site. I followed this article: https://www.c-sharpcorner.com/article/retrieve-calendar-events-using-microsoft-...
0
votes
0answers
17 views

Can I display a webpart as output of another webpart?

Can I output a webpart as part of another webpart rather than duplicating the HTML? For example, if I have a 'Person' webpart that outputs a contact card, can I have a 'People' webpart that outputs a ...
1
vote
1answer
36 views

Hide table column from property pane (WebPart)

I am still new into the WebPart development so bare with me: I have created a WebPart consisting of table and I have several toggles in the settings that can show hide a column in the table. Somehow I ...
0
votes
1answer
45 views

Multiline text field JSON to array - SharePoint SPFx

I'm building a webpart application using SharePoint SPFx with react. I would like to use SharePoint's multiline text field as a way to store an array. I saw this thread here which said you can convert ...
0
votes
0answers
24 views

SharePoint SPFx - Creating comment section using textarea field

I'm building a SharePoint SPFx using react. In one of my components I want to have a comment section. Where a user can write a comment and then submit it to my Multiple lines of text field called ...
0
votes
1answer
21 views

Current Login user profile image in reactjs

I am trying to fetch profile for current login user in SharePoint 2019. But if there is no profile image then it will throw error in img tag. So I created small component that if profile image is not ...
0
votes
0answers
15 views

How to use PnP caching when fetching folders or files Sharepoint picture library?

Caching is working for other calls like for getting items from lists. But I am facing problem when I am trying to use caching when fetching folders and files from sharepoint picture library. PnP call ...
0
votes
2answers
57 views

SPFx: Rendering Mock List Data

I'm trying to follow the Microsoft docs here, but it seems outdated. They are using these two lines to render to the page: const listContainer: Element = this.domElement.querySelector('#...
0
votes
1answer
28 views

object Object error in SPfx

Trying below code to read Site column but getting value as [object Object] OnClick Function: onClick={()=>{this.Funnel(items.SiteColumn)}} Complete function code: public render(): ...
0
votes
2answers
24 views

How can we call oneDrive data into SPFx webpart, which is hosted in SharePoint site?

We need to get the information of all the OneDrive folders and its files in SPFx webpart and this webpart is hosted in another SharePoint site. Thanks in advance
0
votes
1answer
24 views

Comparing images typescript react sharpoint framework

I am having a problem trying to compare two images with each other. One image is saved locally in my project and the second picture is on the internet (url). I tried putting the image into "...
0
votes
0answers
62 views

IE11 cross site collection call issue in iframe

Whenever I try to click button which is inside Iframe using jQuery in my SPFx webpart in IE11 it gives below error. Link in the iframe is of different site collection: SEC7111: HTTPS security is ...
1
vote
1answer
55 views

What is the use of WebPartContext in SPFx?

I am writing an SPFx, I have used React, PnP JS. I created a service class, which will be responsible to communicate with SharePoint. Below is the snippet of the code: export class service implements ...
0
votes
1answer
66 views

Calling render before all js files are loaded so the owl carousel is not working

I am loading all JS files using SPComponentLoader in ts file and I am using await for each load call. Even then when I debug my code I observed it goes to render() in .tsx in between, executes that ...
0
votes
1answer
35 views

SharePoint Template Grouping Using Handlebars

I have a SharePoint Online list that includes a title, URL, and a category. My category options are "Forms" and "Tools". I want a HandleBars template that will loop through this list and group by ...
0
votes
1answer
125 views

SPFx React Webpart - Using PnPJs to add files to list field

I'm building an application using SPFx Webpart with React. On one of my components I have a form that the user can fill out. I'm using PnPjs to push the user's responses into my list field. Everything ...
0
votes
0answers
23 views

Issue while searching folder with specific name

I am facing an issue while retrieving the folder available in a list based on userId. Using the below code to fetch the folder using Name and the “response” returned is most the times “not available” ...
0
votes
0answers
58 views

Is it possible to use SPFX to customize the filters of a SharePoint List?

I was wondering if anyone knew of a webpart available or if it was possible to customize the filtering in the columns on a SharePoint list? Based on the image below, I would like to only show the ...
0
votes
2answers
35 views

Get Display names of Direct reportees in Office 365

I need to get display names for all the direct reportees under a manager. I am using below code to get direct reporteees using rest in SPFx using react. public componentDidMount(){ this....
0
votes
1answer
27 views

Change color of selected element in react and set first one as default

I am trying below code which i picked from stack only i am using this code to change color of selected item its working fine but i also want to set color of first element always selected once page ...
0
votes
1answer
68 views

How to dynamically change css in React/Sharepoint online

I am developing webpart for Sharepoint in React and I have: div located in X.tsx <div className={styles.somestyle}><RichText className={styles.richTextStyle} isEditMode=.../></div> ...
1
vote
0answers
23 views

SharePoint 2019 SPFx, react-router-dom and its types

I am using SharePoint 2019 on premise. When I latest react-router-dom and its type I get error for type. Below is my dependencies and my "typescript": "~2.4.1" So somebody help me which version ...
0
votes
0answers
17 views

SPFX open newform in modal

I'm new in SPFX and i'm trying to open a new form from a button. I'm testing IFrameDialog but it doesn't display it(https://sharepoint.github.io/sp-dev-fx-controls-react/controls/IFrameDialog/) I've ...
0
votes
1answer
39 views

REACT warning when trying to render table

I am new to REACT and I am trying to render my SharePoint list data in a table onto a SharePoint page. I am able to render successfully but then I get the following warning in the console. react-dom....
1
vote
0answers
24 views

SP Online modern ui: reformat date in managed property column

Using SP Online, trying to show a friendly format date (without time) in the SPFx modern search results web part. I've mapped the date column to a preset managed property of type date. That displays ...
3
votes
1answer
38 views

SharePoint User add data using PnPJs

I'm creating a SharePoint SPFx web part app. Using PnPjs I'm able to retrieve the current logged in user's information: sp.web.currentUser.get().then((response : CurrentUser) => { console....
1
vote
2answers
127 views

I want to insert attachment in particular list item using pnpjs

I want to update the list item with attachment but not sure why its failing the payload while saving it. try { sp.web.lists.getByTitle(listName).items.select(item.Title).add((r => { // this will ...
0
votes
1answer
28 views

getting file error or bank when adding to sharepoint list attachment

I am getting a data serialize I think that is causing an issue with POST request, its getting success but the pdf or any file when I try to view from the source it generates error or blank image. How ...
0
votes
0answers
31 views

SP fast deploy error “File not found”

I've been getting this error but the bundle file is already present. Can anyone help me out Fast deploying to SP App C:\Users\xanderCage\Desktop\xanderCage.Apps.SharePoint-Dev1.0_react\OnboardingApp\...
0
votes
0answers
39 views

Sharepoint SPFX react/typescript mobile layout

So I created a Sharepoint SPFx React Typescript app which works perfect. Using this guide here I design a mobile version of the web part app: https://goshakkk.name/different-mobile-desktop-tablet-...
2
votes
1answer
287 views

Retrieving data from rich text editor in spfx web part properties

I am currently creating a custom web part, the webpart is using PropertyFieldCollectionData to collect user data (https://sharepoint.github.io/sp-dev-fx-property-controls/controls/...
1
vote
1answer
48 views

Object notation react map groupby

I am trying to group an object by division. I am not able to figure out how to map them. So the object notation is something like below > Object.keys(this.state.ListItems).map(function(item,key) &...
1
vote
1answer
37 views

React List Keys row edit PNPJS dropdown & People Picker

I am trying to enable row edit for a particular array of People Picker and Dropdown controls. Below is what I have so far, <table cellSpacing="1"> <div className={styles....
2
votes
1answer
118 views

React Props in main component, change to state on change dropdown

I have a main component that is calling a list. I am passing this item to one of the components prop which is the value of a dropdown. For me to be able to setstate, I assigned the prop to state ...
1
vote
2answers
95 views

How do you use componentDidMount and componentDidUpdate in a BaseWebPart class?

Someone told me that he was using componentDidMount and componentDidUpdate in his BaseWebPart class, but looking at the documentation below I realized it shouldn't be possible since it's not a React ...
0
votes
1answer
73 views

Uncaught (in promise) TypeError: sort is not a function react spfx

var currStatus = ''; var job = [...this.state.data]; return <div> { job.length ? <div> { Object.keys(job).forEach(jobTree) => ...
0
votes
1answer
60 views

Using PnPJS Library to display list of data

I'm building a SPFX React webpart. I currently have the webpart on my SharePoint site's workbench page. Here is the code that I'm currently using: private _renderListAsync(): void { // Local ...
0
votes
1answer
632 views

Retrieve data from SharePoint list via PnP JS and CAML Query

I wanted to display all files which have the property" Job" = "Job1" how to retrieve list view items using PnP JS and CAML Query here is the CAML Query ? <ViewFields> <FieldRef Name='...
1
vote
1answer
309 views

How to get items from SP list using query and @pnp/sp and Filtering

I have a getItems function that accepts a filter, but I need to know how to pass in two different filters so that I can retrieve items filtered by both Age and First Name. Here is the definition of ...
0
votes
1answer
152 views

SPFX save array inside item response to display in render react

I am facing simple issue where I need to get value of an expanded person field in react. I am receiving the title and was able to assign it to a variable, but my need is to automatically get the value ...
1
vote
1answer
184 views

Rest API throws 403 when using POST Fetch in React app

I have a React App which is deployed to SharePoint application folder in IIS. When I try to create a folder using rest api, it throws: http://sp2016:5155/_api/web/folders 403 (FORBIDDEN) const ...
0
votes
1answer
424 views

SPFX page context react

I am developing a multiscreen webpart, I am using react framework. I am not able to get the context to load in the webpart file(.tsx) Below is the code so far. There were 2 issues initially, one was ...