![Screenshot of code showing clear mapping between role and component. const RoleViews = { ADMIN: AdminView, EDITOR: EditorView, GUEST: GuestView, // ... }; const SomeComponent = () => { const role = useGetUserRole(); const RoleSpecificView = RoleViews[role] ?? DefaultView; return ( <main> <RoleSpecificView /> </main> ); };](https://pbs.twimg.com/media/FbfRl4WWAAEP_u-.jpg?name=small&format=webp)
ALT Screenshot of code showing clear mapping between role and component. const RoleViews = { ADMIN: AdminView, EDITOR: EditorView, GUEST: GuestView, // ... }; const SomeComponent = () => { const role = useGetUserRole(); const RoleSpecificView = RoleViews[role] ?? DefaultView; return ( <main> <RoleSpecificView /> </main> ); };

ALT Screenshot of code showing description of difficult to read and hard to understand mapping between role and component. const SomeComponent = () => { const role = useGetUserRole(); return ( <main> {role === 'ADMIN' ? ( <AdminView /> ) : role === 'EDITOR' ? ( <EditorView /> ) : role === 'GUEST' ? ( <GuestView /> ) : ( <div>Default view</div> )} </main> ); };




















