So currently I'm trying to render a DataTable component. If I click on a button Users, it should render a table of my Users. When I click on the button Devices, it should render a table of my Devices. However, for some reason, it will only render the datatable of whichever one I click first.
E.g. if I click Devices, it will render my Devices table. Now, when I try to navigate to my Users by clicking on the Users button, it'll still display my Devices datatable.
I maintain a state inside DataTable and I'm updating the state with props that I pass into it. Is there a design flaw that I made that causes my DataTable to not render the correct data?
Thanks for your help!
EDIT: Upon some debugging, it seems the state isn't being updated when I click on the Users button
Reading this React: Why component's constructor is called only once? solved my problem.
TLDR: Rendering the same component will not refresh the component. To overcome this, I needed to introduce a key prop.
Related
I need to restore the UI state of an Autocomplete to its previous state in the UI.
I have a form where I have several MUI Autocompletes. Using the data I get from them in their onChange method, I fetch data from an API and fill a table with that data. But when I change an autocomplete with the table filled, I show a modal where I ask the user wheter he want to loose the data of the table or keep his previous selection. I got that to work well in the variables and prevent the values of change, but my problem is that the UI register the change in the Autocomplete.
Hope someone could help me with that. Thanks in advance.
I am feeding data to ag-grid via redux state. I have a button in each row using which I can update the specific row data. When I update, API is called and newly updated data will come from API and it is updated in redux state which in turn gets updated in Grid.
I am achieving this using the deltaRowDataMode. This deltaRowDataMode will only update specific row data. Data update is working fine. But when I group a column, expand the rows and then update a row data, ag-grid collapsing the grouping, though update is happening fine. For sorting, filtering it is working beautifully.
I tried rememberGroupStateWhenNewData, it is not working. I check many functionalities like expandAll, etc., but none of them suits my condition. Is there any build in functionality or approach which prevents AG-Grid from collapsing the grouping when update happens?
Unfortunately, I am not allowed to share any code anywhere. Sorry about that.
Thank you
below grid options helped me fix this issue:
rememberGroupStateWhenNewData: true,
suppressScrollOnNewData: true,
you have to maintain a immutable data store to keep track of rows so that open group remains open and don't collapse on updating of data.
I'm stuck with a rendering problem. I have a modal form to create/edit an entity (stored in the parent state list), I render a list of "cards" corresponding to each entity in the list. On each card there is a button opening a modal form to edit the entity. The problem is, I can't re-render my form according to the current action (add / edit) and current object.
As the problem is complex to explain, I've reproduced it : https://codesandbox.io/s/myzoo-cbpw8?file=/index.js:2688-2711
Once I've created an entity I'm stuck with the edit form, I cannot re-render a new form. It would imply rendering a new form then set the visibility state to true and that's not working.
Do you have any ideas on how to achieve this ?
If you have any tips or best practice about my codesandbox, let me know !
The problem is that you are trying to manage both editing and adding dialogs with a single visibility variable, so when you open adding dialog, it opens editing dialogs too.
I think maybe it's better to render a single dialog,both for editing and adding, and store in a variable the animal you want to edit after opening the dialog, or storing false/null in case you want to create a new animal.
Link to example
I have made an example here https://codesandbox.io/s/myzoo-forked-7t9em?file=/index.js:177-198. I think the problem was the same state isVisible was managing the 2 forms.
So when you open any of the forms, the component AnimalForm is called with add action then with edit action. We need to have it called in just one case.
So, I just made a small change and have a variable isVisible for each form. This way the forms are opened independently.
On my Main Screen I have some search parameters that an user can choose from, like brand and price. If I select any of them and press search it send the data to the Second Screen, to show the list, but It won't render until I scroll on it.
But if I search without setting any parameters it shows the list correctly. Since Im sending the parameters to another screen I thought it should re-render.
The same happens with my sort filters... When I'm on the list, if I select "sorte by price" it won't re-render until I scroll again... What am I doing wrong?
EDIT: im not alone: https://github.com/facebook/react-native/issues/13316
Setting removeClippedSubviews={false} fixes the initial search, but the sort filters are still not working.
I solved by using this on my FlatList: extraData={this.state} this way, FlatList knows it has to re-render.
It's in the docs.
I have many child React components that are rendered from a parent Component and upon clicking the name of each one, I'd like to be able to edit the state of the particular component that was clicked, however I am not sure how to best "pass" the current state into the modal so that they can be edited in the form on the modal.
I have seen implementations where the modal fields are set with jquery (.val()) after the click, which does not seem like the idiomatic react way to do this.
How should I prepopulate the modal fields from the particular component and where should the modal be rendered exactly?
Depending on the modal you use, you should simply populate those values using props into a modal component. You can create a more generic modal component and feed this modal your props, or a specific modal if you don't think you could create a generic one that fits more use cases than this specific one. It's hard to give examples of code without seeing/knowing which one you use, but below link of react-bootstrap's implementation of the modal might help you!
React-bootstrap's implementation of the Bootstrap modal.