I am implementing a user management page that brings up several modal dialogs - one for adding a user (<AddUserModal…/>, one for editing a user(EditUserModal user={user}…/>, one for editing the user profile (), etc.
My user management page consists of a grid of cards, each with buttons to launch the dialogs. When a button is clicked, the method provided by the user management page is called with the appropriate user and the modal is shown.
My question is this:
My render method is rendering the grid of cards plus all of the Modal dialogs. EG:
<Card.Group>
{this.props.users.map(user =>
)}
</Card.Group>
<UserProfileModal user={this.state.user} open={this.state.modalOpen && this.state.modal === UMCard.Actions.profile} onClose={() => this.showModal(false)}/>
<EditUserModal user={this.state.user} open={this.state.modalOpen && this.state.modal === UMCard.Actions.edit} onClose={() => this.showModal(false)}/>
<AddUserModal user={this.state.user} open={this.state.modalOpen && this.state.modal === UMCard.Actions.add} onClose={() => this.showModal(false)}/>
My question is:
I can code it up to do one of the following:
#1 I can render all the modals (as in the code above) or
#2 I can prevent them from being rendered based on the user (not being null) and action ({this.state.user && this.state.modal === UMCard.Actions.xxx && }
#1 means that I am mounting/unmounting the modal component once while on this page, while #2 means I am mounting/unmounting the component every time the user/action prevents the component from being rendered.
Which is the best practice?
(BTW, I am using the semantic-ui-react Modal component)