title: Material UI - How to ListItem link to open a dialog
body: <p>I'll preface with the fact I am pretty green on React.</p>
  
  <p>I have a dynamic list of employee items inside a <code>Card</code> component as part of a dashboard. 
  I want to add the ability to create a link per employee, clicking on the link will open a modal dialog to enable  editing in the same page.</p>
  
  <p>I am not so sure how to go about making the connection between the ListItem->Link->EmployeeEdit functionality to ensure that I am passing the right props at every step of the way. </p>
  
  <p>So I have this so far to show the employees in a list of links but not sure how to create the relationship to render the EmployeeEdit component:  </p>
  
  <p>LIST:</p>
  
  <pre><code>    &lt;List dense={true}&gt;
          {(Array.isArray(employees) &amp;&amp; employees.length != 0 )  ? employees.map(employee =&gt; {
              const LinkToEdit = ({props}) =&gt; &lt;Link {...props} record={employee}/&gt;;
              return(
              &lt;ListItem
                  key={employee.id}
                  button
                  component={LinkToEdit}
              &gt;
                  &lt;ListItemText
                      primary={
                          `${employee.firstName} ${employee.lastName}`
                      }
                      secondary={translate('tequiti.entity.joined_date', {
                          createdAt: new Date(employee.createdAt).toLocaleString('en-US')
                      })}
  
                  /&gt;
                  &lt;ListItemSecondaryAction/&gt;
              &lt;/ListItem&gt;
              )
          }) : &lt;p&gt;No employees for this company&lt;/p&gt;
          }
      &lt;/List&gt;
  </code></pre>
  
  <p>EDITEMPLOYEE:</p>
  
  <pre><code>const EmployeeEdit = (props) =&gt; {
      const translate = useTranslate();
      const [state, setState] = useState({showEditDialog: true});
      let {showEditDialog} = state;
      const handleCloseEditClick = () =&gt; {
          setState({
              showEditDialog: false
          });
      };
      return(
          &lt;Dialog
              fullWidth
              open={showEditDialog}
              modal={ true }
              onClose={handleCloseEditClick}
              aria-label="Edit Employee"
              {...props}
          &gt;
              &lt;DialogTitle&gt;Edit Employee&lt;/DialogTitle&gt;
              &lt;DialogContent&gt;
                  &lt;TabbedForm resource="employee" toolbar={&lt;UpdateActions {...props} /&gt;}&gt;
                      &lt;FormTab label={translate('root.label.identity')}&gt;
                          &lt;PersonInput /&gt;
                      &lt;/FormTab&gt;
                      &lt;FormTab label={translate('root.label.address')}&gt;
                          &lt;AddressInput /&gt;
                      &lt;/FormTab&gt;
                  &lt;/TabbedForm&gt;
              &lt;/DialogContent&gt;
              &lt;DialogActions&gt;
                  &lt;Button label="ra.action.cancel" onClick={() =&gt; handleCloseEditClick()}&gt;
                      &lt;IconCancel /&gt;
                  &lt;/Button&gt;
              &lt;/DialogActions&gt;
          &lt;/Dialog&gt;
  )};
  
  </code></pre>
  
  <p>Any suggestions/help would be great! </p>