Context: This page uses ReactJS to list a series of cards (rows) with information about people (screenshot below). Each one of these cards has a “Details” button that would expand into a pop-up modal (Material UI) that displays more information about the person.
Problem: Whenever the “Details” button is clicked, I am being prompted with the following error. The button calls the “DetailedModal” function below “TutorCard” function, located in the same file.
. I believe that this could be either (1) or (3) as suggested by the error above.
Code:
import React from "react";
// import {ExpandedTutorCard} from "./ExpandedTutorCard.js"
import Button from '@mui/material/Button';
// import ExpandedTutorCard from "./ExpandedTutorCard.js";
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import Typography from '@mui/material/Typography';
function TutorCard({ first_name, last_name, grade, subject}) {
return (
<div className="md:flex bg-white shadow text-gray-800 my-4 py-4 px-10 rounded-md items-center justify-between hover:bg-gray-300" >
{/* <img
style={{ maxWidth: "60px"}}
className="rounded-full shadow-md border border-gray-300"
src={image}
alt="employee"
/> */}
<p className="font text-md" style={{ color: 'black', textAlign: "center"}}>{first_name}</p>
<p className="font text-md" style={{ color: 'black', textAlign: "center" }}>{last_name}</p>
<p style={{ color: 'black', textAlign: "center" }}>{grade}</p>
<p style={{ color: 'black', textAlign: "center" }}>{subject}</p>
<Button onClick={DetailedModal}> Details </Button> //Calls "DetailedModal"
</div>
)
}
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
'& .MuiDialogContent-root': {
padding: theme.spacing(2),
},
'& .MuiDialogActions-root': {
padding: theme.spacing(1),
},
}));
function BootstrapDialogTitle(props) {
const { children, onClose, ...other } = props;
return (
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
{children}
{onClose ? (
<IconButton
aria-label="close"
onClick={onClose}
sx={{
position: 'absolute',
right: 8,
top: 8,
color: (theme) => theme.palette.grey[500],
}}
>
<CloseIcon />
</IconButton>
) : null}
</DialogTitle>
);
}
BootstrapDialogTitle.propTypes = {
children: PropTypes.node,
onClose: PropTypes.func.isRequired,
};
function DetailedModal() { //called when "Details" button
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" onClick={handleClickOpen}>
Open dialog
</Button>
<BootstrapDialog
onClose={handleClose}
aria-labelledby="customized-dialog-title"
open={open}
>
<BootstrapDialogTitle id="customized-dialog-title" onClose={handleClose}>
Modal title
</BootstrapDialogTitle>
<DialogContent dividers>
<Typography gutterBottom>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</Typography>
<Typography gutterBottom>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</Typography>
<Typography gutterBottom>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</Typography>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleClose}>
Save changes
</Button>
</DialogActions>
</BootstrapDialog>
</div>
);
}
export default TutorCard;
Package.json:
{
"name": "tutors-information",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.12.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@trimbleinc/modus-react-bootstrap": "^1.2.0",
"@types/react": "^18.0.35",
"@types/react-dom": "^18.0.11",
"axios": "^1.3.6",
"mdb-react-ui-kit": "^6.0.0",
"react": ">=16.8.0",
"react-axios": "^2.0.6",
"react-dom": ">=16.8.0",
"react-icons": "^4.8.0",
"react-router-dom": "^6.10.0",
"react-scripts": "^2.1.3",
"tailwindcss": "^3.3.1",
"u": "^0.1.0",
"uid": "^2.0.2",
"web-vitals": "^2.1.4"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
},
"scripts": {
"start": "set PORT=3008 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@expo/webpack-config": "^18.0.4"
}
}
I had already tried implementing the workarounds found on almost every other StackOverFlow question for this error, however none of it seems to resolve the issue.