How it works...

The visibility of the dialog and the snackbar are controlled by Boolean state values, dialogOpen and snackbarOpen, respectively. The values of the fields within the dialog component are also stored in the state of the CollectingFormInput component. Let's take a closer look at the dialog markup:

<Dialog open={dialogOpen} onClose={onDialogClose}>  <DialogTitle>New User</DialogTitle>  <DialogContent>    <TextField      autoFocus      margin="normal"      label="First Name"      InputProps={{ name: 'first' }}      onChange={e => setFirst(e.target.value)}      value={first}      fullWidth    />    <TextField      margin="normal"      label="Last Name"      InputProps={{ name: 'last' }}      onChange={e => setLast(e.target.value)}      value={last}      fullWidth    />    <TextField      margin="normal" label="Email ...

Get React Material-UI Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.