Modal in a list

Hi i'd like to ask for best practice for these kind of implementation lets say i have a CRUD feature that the list could go on to hundreds each row have their own delete button and when clicked would show up Delete Modal i have 2 idea about how to implement these modal 1. put modal inside each mapped items, so if theres 100+ row then there's gonna be 100+ delete modal, ofc i'd put it inside a lazy load/dynamic imports or 2. I just have 1 modal, then when button clicked mutate a global state to open modal and pass the data that i need inside if performance is what im looking for, which way i need to implement ? thanks! or if you have any suggestion how to implement these better please let me know
6 Replies
Brendonovich
Brendonovich2y ago
personally i'm a fan of the 1 modal for 100 buttons approach using something like zustand to manage the state
Vincent Udén
Vincent Udén2y ago
I've gone for the second approach, and it most certainly much more performant. Even if lazy-loading the 100+ modal components. IMO it makes for cleaner code with less callback hell as well but tha's probably very subjective
Tom
Tom2y ago
I had this problem in my app. I would say you should default to having a modal per item until it becomes a problem because this will allow you to cleanly play any in / out animations. If it IS a problem however, (2) will definitely perform better in practice the animation problem ONLY matters for the out animation because if you do things the way react wants you to your modal CAN fade in, but it cant fade out because it doesnt exist anymore if that makes sense its subtle, but i did just want to point it out and if you dont care about the animations just go for (2)
Develliot
Develliot2y ago
I would go even further instead of having a delete button appear billion times in a row I would have a way of selecting one or many and have a contextual tool bar at the top with actions where you can delete multiple at a time. Having lots of the the same button with the same text technically do something different or that goes somewhere different is bad accessibility unless you have custom aria labels being explicit to make a distinction between each button.
Yiannis
Yiannis2y ago
I got for second option and just use state to select.
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Want results from more Discord servers?
Add your server