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.
Related
So I'm currently doing Brad Traversys 50 projects in 50 days, but I wanted to do it built in Next.js with React for practice, as that's what I use at my job.
As you can see from me posting here, it's not going so well! I'm already running into road blocks.
I'm trying to create a set of cards, that when one is clicked, it expands out. Outside this, if there is a card already expanded, and another card is clicked, I need the previously expanded card to collapse, whilst the card currently clicked expands.
I'm currently trying to work off an active state, and passing that down to the Panel props, but obviously that just sets all the flex's to be the same and nothing happens. But when I try to define the active useState inside the Panel component, it works, but I can't then target the other active states in the other Panels, to set them to false.
You can see my code on this CodeSandbox https://codesandbox.io/s/nifty-goldberg-5noi4?file=/pages/expanding-cards.jsx
You can see the correct functionality here https://50projects50days.com/projects/expanding-cards/
What's the best way to go about this?
You need a logic like Accordion control in Material UI. As in my comment, here is the example.
https://material-ui.com/components/accordion/#controlled-accordion
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.
I have a flatlist which fetch data from a remote server, the flatlist have pagination implemented and a linked search functionality.
OnEndReached is called when I hit the end of the list and the next page is loaded, the same thing happen when I search through the list and one or more record is found that matchs the search criteria.
However when I search through the list and there is 0 result matching the search from the already loaded records, in this case onEndReached is not called at all.
I tried different value for the onendreachedthreshold but prop without success.
Do you have any idea why is this happening.
Thanks
onEndReached is called when the end of the view of the FlatList is within the range of the onEndReachedThreshold.
In the case where 0 results are displayed, the view of the FlatList would be within the visible screen area (i.e. no scrolling), hence, onEndReached won't be called. That's how onEndReached works.
P.S. If you're trying to display a message when 0 results are displayed, you should try calling it when the results are fetched and the page 1 is empty. Since I don't exactly know what you're trying to do, I can't suggest you the best solution. Try explaining a bit more maybe.
I use admin-on-rest <SimpleList> component for mobile view and when my resource doesn't have edit view I get white screen when I clicked on some element. If resource haven't Edit-view I want to show Show-view for user.
How can I do it?
Not possible yet, but it will be in version 2.0.0. In the mean time, you can create your own SimpleList component. Original one is here
I'm wondering what the best way is to handle a list of items and displaying an item detail when a user clicks/selects one of the items. An example of this would be showing a list of email messages in the left sidebar and showing the message details in the main content area when a user clicks on one of the messages.
Using #pangrantz's great answer on how to mark active menu item using router infrastructure I was able to come up with a working example: jsFiddle
But there are a couple things that don't seem quite right:
First, in #connectOutlets in the Router's show state, I'm setting the selected message on the controller as well as connecting the outlet with the same object. I would think I could do one or the other.
connectOutlets: function(router, context) {
router.set('messagesController.selected', context);
router.get('applicationController').connectOutlet('message-details', 'messageDetails', context);
}
Second, I'm transitioning to the same state from both the index and show states. I'm not even sure I want to be transitioning to a new state - I just want to hook up the outlet.
showDetails: Ember.Route.transitionTo('show')
Is there anything I can change to make this code more idiomatic? Thanks!
This code looks pretty idiomatic to my eyes. You are right, you do not need to set the selected message. When you connect the outlet for message details it will set the selected message as content on the message details controller.
You should IMO be transitioning from a index to a show state as this is good RESTful practice and also allows users to bookmark individual messages. I would make the URL to the index state be '/messages' rather than '/'.