Material UI next simple dialog add new contact

Question

I am using the material-ui next branch and using the following example as reference for building a dialog.

https://material-ui-next.com/demos/dialogs/ https://codesandbox.io/s/7rq8nl11x

I wanted to know the best way to let the user enter a new contact as per material guidelines ie how to handle the UI for click of add contact button present in the bottom of the dialog. Would it be to hide this dialog and show a new dialog instead which shows a form letting the user enter a new contact. I'm mostly looking for suggestions on design.

Answer 1

There's a lot of good information on the material design guidelines and best practices for managing components in React.

With that said, a good solution for your situation is to handle all the account management within the one modal. Here's an idea for a structure that's very similar to what Google does:

DialogContainer as the parent component to handle logic and contain the next two components.

AccountList to render each user as well as the 'add account' button.

AccountCreation component that renders the input to add another account.