反应中不同内容模态窗口的最佳性能

Question

Background

I used react to develop my most recent app and I really enjoyed the framework. However there is one thing that am i yet to understand and that is the implementation of varying content modal windows. When building content based web-app it seems to be something I stubble upon quite often so I would really like to get your thoughts on what is the best practice regarding the matter as I have been unsuccessful in finding it online

The problem

Let me present a sample problem in which it occurs. Saying we have a table with N rows. For each of these rows containing events i want to be able to open a modal window with detailed information about the event.

See picture

Dilemma

Do we implement one Modal window with varying content dependant on something like redux state, or is it okay practice to implement one Modal/Row. What kind of performance side effects can we expect to see from the later of the approaches? The more I think about it the more uncertain I get and therefore I would be very happy to get some clearance regarding the matter.

Best regards Albin

Answer 1

If your detailed informations's modal has the same structure for each row, you can create one modal. You pass props from the row to the modal component and display them. For example, service name, price, status, user, location, ect ...

But If your content will not be the same depending of event, yes you have to create differents modal.