You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
The components don't re-render when a React state that's passed as a prop is updated. This happens for the React components in @microsoft/mgt-react as well as for the Web components in @microsoft/mgt-components (I tested both in a React app).
To Reproduce
You can test this with, for example, the file-list. (see full code below) Steps to reproduce the behavior:
Init a new React app with CRA like so: yarn create react-app my-app --template typescript
Add a stateful value and its update function like so: const [query, setQuery] = useState("");
Add a <FileList /> in your App.tsx
Add a function to the itemClick event that sets the current fileListQuery to the id of the clicked folder like so: <FileList fileExtensions={[""]} disableOpenOnClick itemClick={(e: CustomEvent<DriveItem>) => {setQuery(`/me/drive/items/${e.detail.id}/children`);}} fileListQuery={query}></FileList>
Expected behavior
The state update should trigger a re-render of <App /> and, by doing so, should update the MGT component.
Environment:
OS: Windows
Browser: Chrome
Framework: React
Context: MGT Core
Version: 4.1.0
Provider: new Msal2Provider({clientId: "redacted", authority: "redacted", redirectUri: "redacted", scopes: ["files.read"]});
Workaround
Add a key prop that is set to the respective state value to force a re-render every time this state is updated (although this is not recommended by React). In this case: key={query} (uncomment this in the full code provided above).
Additional context:
As mentioned above, this bug applies not only to the React- but also the Web components. I set up a new React app, registered the web components in it manually and set an attribute to a stateful value to test this.
The text was updated successfully, but these errors were encountered:
tobi1220
changed the title
[BUG] [CORE] Components don't re-render on React State update
[BUG] Components don't re-render on React State update
Apr 4, 2024
Describe the bug
The components don't re-render when a React state that's passed as a prop is updated. This happens for the React components in
@microsoft/mgt-react
as well as for the Web components in@microsoft/mgt-components
(I tested both in a React app).To Reproduce
You can test this with, for example, the file-list. (see full code below) Steps to reproduce the behavior:
yarn create react-app my-app --template typescript
const [query, setQuery] = useState("");
<FileList />
in yourApp.tsx
itemClick
event that sets the currentfileListQuery
to the id of the clicked folder like so:<FileList fileExtensions={[""]} disableOpenOnClick itemClick={(e: CustomEvent<DriveItem>) => {setQuery(`/me/drive/items/${e.detail.id}/children`);}} fileListQuery={query}></FileList>
Expected behavior
The state update should trigger a re-render of
<App />
and, by doing so, should update the MGT component.Environment:
new Msal2Provider({clientId: "redacted", authority: "redacted", redirectUri: "redacted", scopes: ["files.read"]});
Full code:
Workaround
Add a
key
prop that is set to the respective state value to force a re-render every time this state is updated (although this is not recommended by React). In this case:key={query}
(uncomment this in the full code provided above).Additional context:
As mentioned above, this bug applies not only to the React- but also the Web components. I set up a new React app, registered the web components in it manually and set an attribute to a stateful value to test this.
The text was updated successfully, but these errors were encountered: