Material UI Dialog Component - How to show it?

user_14428862 0
Viewed 632

I've implemented a Material UI table and need now to show a Dialog when user clicks on a specific row.

Bellow is just part of the code that ilustrates what I am doing. It gets the onClick event and calls the handleCellClick function to handle the event. The handle function should call the ResponsiveDialog, which is actually a snipped from the Material UI, but for some reason it daoesnt get executed.

export const OrderScoreCell = (props) => {

  const { score, scoreDesc } = props

  const handleCellClick = (e) => {
    <ResponsiveDialog />
  }

  return (
    <>
      <TableCell onClick={handleCellClick} lign="left">
        <LightTooltip 
          title={`Risco ${scoreDesc}`} 
          placement="top-end"
          arrow  
          interactive 
          TransitionComponent={Fade} 
          TransitionProps={{ timeout: 600 }} 
          aria-label="score" 
        >
material-ui reactjs dialog
1 Answers

Issue

All UI you want rendered needs to be returned in the function component return. Returning JSX literals from a function only works if the function is called within the return, not as an event handler callback.

Solution

Add local state that is updated by the click handler and conditionally render the dialog.

Example:

export const OrderScoreCell = ({ score, scoreDesc }) => {
  const [isOpen, setIsOpen] = React.useState(false);

  const handleCellClick = (e) => setIsOpen(true);

  return (
    <>
      <TableCell onClick={handleCellClick} lign="left">
        <LightTooltip 
          title={`Risco ${scoreDesc}`} 
          placement="top-end"
          arrow  
          interactive 
          TransitionComponent={Fade} 
          TransitionProps={{ timeout: 600 }} 
          aria-label="score" 
        >
      </TableCell >
      {isOpen && <ResponsiveDialog />}
    <>
  );
};
user_86908570
Related