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"]});
Full code:
import {
Login,
FileList,
} from '@microsoft/mgt-react';
import { DriveItem } from '@microsoft/microsoft-graph-types';
import { useState } from 'react';
const App = () => {
const [query, setQuery] = useState("");
return (
<div className='App'>
<Login />
<FileList /*key={query}*/ fileExtensions={[""]} disableOpenOnClick itemClick={(e: CustomEvent<DriveItem>) => {setQuery(`/me/drive/items/${e.detail.id}/children`);}} fileListQuery={query}></FileList>
</div>
);
}
export default App;
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.
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-reactas 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 typescriptconst [query, setQuery] = useState("");<FileList />in yourApp.tsxitemClickevent that sets the currentfileListQueryto 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
keyprop 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.