Displaying result in pop-up in react-CodePudding

I have below table which is working properly.

Now client has requested , if user clicks on the icon(highlighted in blue) the selected row should display in popup vertically. any idea how to do it. I am beginner in react.

CodePudding user response：

refer the below example using material ui popover component

import * as React from 'react';
import Popover from '@mui/material/Popover';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';

export default function BasicPopover() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;

  return (
    <div>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        Open Popover
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
      >
        <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
      </Popover>
    </div>
  );
}

you can refer this link material ui and customize it your way

CodePudding user response：

I have done an easy implementation of the popup. I didn't understand popup vertically so I implemented the general popup.

Link: https://jsfiddle.net/himanshu1024/hyvqkfwu/2/

Here the thing is, a popup will only show when a row is selected/saved and if selectedRow is NULL, then NULL && <div id="popup"></div> will be false, so no popup will be shown.

You can also see for the other similar code here: https://www.c-sharpcorner.com/article/how-to-create-a-modal-pop-up-in-reactjs-appliaction/

Here is a video explanation: https://www.youtube.com/watch?v=i8fAO_zyFAM