How to control material UI Accordian expansion / collapse by click on icon from another component?

Question

Actually, i'm creating the table where i've to expand the Row by clicking the icon on another column! any help will be appreciated ! (i'm using material UI components like table, accordian)

Here's the Demo of my code on sandbox!

https://codesandbox.io/s/proud-resonance-iryir7?file=/src/App.js:73-74

My concern is when I click on message icon, email cell will be expanded!

Answer 1

import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Box,
  Grid,
  TextField,
  Typography
} from "@mui/material";
import React, { useEffect, useState } from "react";

import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
// import Collapse from "@mui/material/Collapse";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import ChatBubbleOutlineOutlinedIcon from "@mui/icons-material/ChatBubbleOutlineOutlined";
import Modal from "@mui/material/Modal";

const Example = () => {
  const [Data, setData] = useState([]);
  const [open, setOpen] = React.useState(false);
  const [expandedId, setExpandedId] = useState("0");

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  function createData(
    name,
id,
    email
  ) {
    return {
      name,
id,
      email
    };
  }

  const modalstyle = {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: 400,
    bgcolor: "background.paper",
    border: "2px solid #000",
    boxShadow: 24,
    p: 4
  };
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((result) => setData(result));
  });

  const rows = [
    Data.map((data) =>
      createData(
        data.name,
data.id,
        data.email
      )
    )
  ];

  return (
    <div>
      <div className="heading">
        <Grid container>
          <Grid item md={9} sm={9} xs={12}></Grid>
        </Grid>
        <div className="box">
          <TableContainer component={Paper}>
            <Table aria-label="simple table">
              <TableHead
                sx={{
                  "& .MuiTableCell-head": {
                    backgroundColor: "#000000",
                    color: "#ffffff",
                    height: "55px",

                    textAlign: "center",
                    fontSize: "14px"
                  }
                }}
              >
                <TableRow>
                  <TableCell>name</TableCell>

                  <TableCell align="right">email</TableCell>

                  <TableCell></TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {rows[0].map((row) => (
                  <TableRow
                    sx={{
                      "& td, & th": {
                        border: 1,
                        borderColor: "gray"
                      }
                    }}
                    key={row.id}
                  >
                    <TableCell component="th" scope="row">
                      <div className="codes" onClick={handleOpen}>
                        {`${row.name} ${row.id}`}
                      </div>
                    </TableCell>

                    <TableCell align="left">
                      <div className="msg-container">
                        <Accordion
                          elevation={0}
                          key={row.Id}
                          // onChange={handleChangeExpanded(`panel_${row.id}`)}
                          expanded = {expandedId === row.id}
                        >
                          <AccordionSummary 
                          ariaControls={`${row.id}_panel1a-content`}
                          id={`${row.id}_panel1a-id`}
          >
                            <div className="msg">{row.email}</div>
                          </AccordionSummary>
                          <AccordionDetails>
                            <TextField placeholder="Enter Here"></TextField>
                          </AccordionDetails>
                        </Accordion>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="info-icon-container">
                        <div className="info-icon" onClick={handleOpen}>
                          <InfoOutlinedIcon />
                        </div>
                        <Modal
                          open={open}
                          onClose={handleClose}
                          aria-labelledby="modal-modal-title"
                          aria-describedby="modal-modal-description"
                          BackdropProps={{
                            style: {
                              background: "transparent"
                            }
                          }}
                        >
                          <Box sx={modalstyle}>
                            <Typography
                              id="modal-modal-title"
                              variant="h6"
                              component="h2"
                            >
                              Text in a modal
                            </Typography>
                            <Typography
                              id="modal-modal-description"
                              sx={{ mt: 2 }}
                            >
                              Duis mollis, est non commodo luctus, nisi erat
                              porttitor ligula.
                            </Typography>
                          </Box>
                        </Modal>
                        <div className="chatbubble-icon">
                          <ChatBubbleOutlineOutlinedIcon onClick={() => setExpandedId(prev => prev === row.id ? "0" : row.id)} />
                        </div>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        </div>
      </div>
    </div>
  );
};

export default Example;

check this out.