I am pretty new to JavaScript and was hoping someone could help me out with this one.
I have this page that shows all the scheduled exams and when you press on "Learn more" a modal opens up that should let you modify information about the exam itself. At the moment it shows the equipment that is selected when creating the exam plus the rest of the equipment available and you should be able to select/deselect in order to change if needed. The problem is that a different modal opens up for each exam to show the corresponding data only. All the exam information I've got shown through mapping to get to the inside arrays of the "exams" nested array, so I do not know how to initialize a const before the render when I need the modal to be open to get that specific exams' info. At the moment I am mapping the values of the selected equipment which does not let me change the selection like I should.
https://codesandbox.io/s/81xer5
import "./styles.css";
import React, { useState, useEffect } from "react";
import Box from "#mui/material/Box";
import Card from "#mui/material/Card";
import CardActions from "#mui/material/CardActions";
import CardContent from "#mui/material/CardContent";
import Button from "#mui/material/Button";
import Typography from "#mui/material/Typography";
import Modal from "#mui/material/Modal";
import Chip from "#mui/material/Chip";
import OutlinedInput from "#mui/material/OutlinedInput";
import InputLabel from "#mui/material/InputLabel";
import MenuItem from "#mui/material/MenuItem";
import FormControl from "#mui/material/FormControl";
import Select from "#mui/material/Select";
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250
}
}
};
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
boxShadow: 24,
p: 4,
borderRadius: 1
};
export default function App() {
const [exams, setExams] = useState([
{
id: "18897a8c-bd5b-4fc0-86d1-74ee509d46ee",
name: "New Test",
date: null,
time: null,
date2: "2022-06-20",
time2: "15:30",
students: [
{
id: "749ce920-2462-457a-8af3-26ff9c00dda5",
username: "student1",
email: "student1#gmail.com",
firstName: "Student",
lastName: "Studentov",
roleName: "STUDENT"
},
{
id: "90289548-19bb-480b-81e3-c36340debbc7",
username: "student2",
email: "student2#gmail.com",
firstName: "Student",
lastName: "Studentov",
roleName: "STUDENT"
},
{
id: "dfe50fe5-ef9d-480e-aa6c-2f5c81bb22da",
username: "student3",
email: "student3#gmail.com",
firstName: "Student",
lastName: "Studentov",
roleName: "STUDENT"
}
],
staff: [
{
id: "a3b53ed0-63fc-4f77-a8dc-74915d6aefea",
username: "staff",
email: "staff#gmail.com",
firstName: "Staff",
lastName: "Staffov",
roleName: "STAFF"
}
],
rooms: [
{
id: "a49f18cb-4fe8-4a2c-a665-4361c5401f31",
number: 100,
nrOfSeats: 20
},
{
id: "5c46e888-fce4-4c1b-a8ec-e04d32a5cf6c",
number: 400,
nrOfSeats: 10
}
],
equipment: [
{
id: "08506d1b-30ce-43d2-a0b8-74f87082e356",
name: "Crane",
availability: true
}
]
},
{
id: "65b7ecd2-ba30-4369-9f13-9186dc5cc73c",
name: "Crane Exam",
date: null,
time: null,
date2: null,
time2: null,
students: [
{
id: "749ce920-2462-457a-8af3-26ff9c00dda5",
username: "student1",
email: "student1#gmail.com",
firstName: "Student",
lastName: "Studentov",
roleName: "STUDENT"
},
{
id: "90289548-19bb-480b-81e3-c36340debbc7",
username: "student2",
email: "student2#gmail.com",
firstName: "Student",
lastName: "Studentov",
roleName: "STUDENT"
},
{
id: "dfe50fe5-ef9d-480e-aa6c-2f5c81bb22da",
username: "student3",
email: "student3#gmail.com",
firstName: "Student",
lastName: "Studentov",
roleName: "STUDENT"
}
],
staff: [
{
id: "a3b53ed0-63fc-4f77-a8dc-74915d6aefea",
username: "staff",
email: "staff#gmail.com",
firstName: "Staff",
lastName: "Staffov",
roleName: "STAFF"
}
],
rooms: [
{
id: "a49f18cb-4fe8-4a2c-a665-4361c5401f31",
number: 100,
nrOfSeats: 20
},
{
id: "5c46e888-fce4-4c1b-a8ec-e04d32a5cf6c",
number: 400,
nrOfSeats: 10
}
],
equipment: [
{
id: "08506d1b-30ce-43d2-a0b8-74f87082e356",
name: "Crane",
availability: true
},
{
id: "be1da3c9-7192-459f-bdba-767e005eaac9",
name: "Killer Robot",
availability: true
}
]
}
]);
const [equipment, setEquipment] = useState([
{
id: "08506d1b-30ce-43d2-a0b8-74f87082e356",
name: "Crane",
availability: true
},
{
id: "7a1716c7-3398-4e3d-9523-7ba4a102a79b",
name: "Lift",
availability: true
},
{
id: "be1da3c9-7192-459f-bdba-767e005eaac9",
name: "Killer Robot",
availability: true
}
]);
const initialShowState = Object.fromEntries(
exams.map((data) => [data.id, false])
);
const [show, setShow] = React.useState(initialShowState);
const toggleShow = (id) =>
setShow((prev) => {
return { ...prev, [id]: !prev[id] };
});
console.log({ show });
const [value, setValue] = React.useState([]); //this is what the select chip uses by default
const handleChange = (e) => {
const {
target: { value }
} = e;
console.log(value);
setValue(
// On autofill we get a the stringified value.
typeof value === "string" ? value.split(",") : value
);
};
return (
<div className="App">
{exams.map((data, key) => {
return (
<div key={key} style={{ width: "300px", display: "inline-block" }}>
<Box
sx={{
minWidth: 300,
maxWidth: 300,
display: "inline-block",
paddingTop: "10px",
paddingLeft: "10px"
}}
>
<Card variant="outlined">
<React.Fragment>
<CardContent>
<Typography variant="h5" component="div">
{data.name}
</Typography>
</CardContent>
<CardActions>
<Button size="small" onClick={() => toggleShow(data.id)}>
Learn More
</Button>
</CardActions>
</React.Fragment>
</Card>
</Box>
<Modal open={show[data.id]} onClose={() => toggleShow(data.id)}>
<Box sx={style}>
<Typography
component={"span"}
id="transition-modal-description"
sx={{ mt: 2 }}
>
<FormControl sx={{ m: 1, width: 300 }}>
<InputLabel id="demo-multiple-chip-label">Chip</InputLabel>
<Select
multiple
value={data.equipment.map((sub) => sub.id)}
// value={value}
onChange={handleChange}
input={
<OutlinedInput id="select-multiple-chip" label="Chip" />
}
renderValue={(selected) => {
return (
<Box
sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}
>
{selected.map((value) => {
const option = equipment.find(
(o) => o.id === value
);
return <Chip key={value} label={option.name} />;
})}
</Box>
);
}}
MenuProps={MenuProps}
>
{equipment.map((option) => (
<MenuItem key={option.id} value={option.id}>
{option.name}
</MenuItem>
))}
</Select>
</FormControl>
</Typography>
</Box>
</Modal>
</div>
);
})}
</div>
);
}
Continuing my comment above, you're adding a <Modal> inside the map function, this will mount a <Modal> element for each exam, which is bad for performance and more difficult to implement.
What you want to do is to have only one modal, and upon clicking "Learn More" you save the active exam in a state, the modal uses this state to show the correct data. You also want to split the logic between the exam and the modal to make it more easy to implement.
Here is a sample code, I have moved the arrays outside the component to make the code more clear:
const EXAMS = [...];
const EQUIPMENTS = [...];
export default function App() {
const [exams, setExams] = useState(EXAMS);
const [equipment, setEquipment] = useState(EQUIPMENTS);
const [modalExam, setModalExam] = useState(null);
return (
<div className="App">
{exams.map((data, key) => {
return (
<div key={key} style={{ width: "300px", display: "inline-block" }}>
<Box
sx={{
minWidth: 300,
maxWidth: 300,
display: "inline-block",
paddingTop: "10px",
paddingLeft: "10px",
}}
>
<Card variant="outlined">
<React.Fragment>
<CardContent>
<Typography variant="h5" component="div">
{data.name}
</Typography>
</CardContent>
<CardActions>
<Button size="small" onClick={() => setModalExam(data)}>
Learn More
</Button>
</CardActions>
</React.Fragment>
</Card>
</Box>
</div>
);
})}
<ModalExam
equipment={equipment}
exam={modalExam}
onClose={() => setModalExam(null)}
/>
</div>
);
}
function ModalExam({ exam, equipment, onClose }) {
const [chipValue, setChipValue] = useState([]);
useEffect(() => {
if (exam) {
setChipValue(exam.equipment.map((sub) => sub.id));
}
}, [exam]);
const handleChange = (e) => {
const {
target: { value },
} = e;
console.log(value);
setChipValue(typeof value === "string" ? value.split(",") : value);
};
return (
<Modal open={exam !== null} onClose={onClose}>
{exam && (
<Box sx={style}>
<Typography
component={"span"}
id="transition-modal-description"
sx={{ mt: 2 }}
>
<p>{exam.name}</p>
<FormControl sx={{ m: 1, width: 300 }}>
<InputLabel id="demo-multiple-chip-label">Chip</InputLabel>
<Select
multiple
value={chipValue}
// value={value}
onChange={handleChange}
input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
renderValue={(selected) => {
return (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => {
const option = equipment.find((o) => o.id === value);
return <Chip key={value} label={option.name} />;
})}
</Box>
);
}}
MenuProps={MenuProps}
>
{equipment.map((option) => (
<MenuItem key={option.id} value={option.id}>
{option.name}
</MenuItem>
))}
</Select>
</FormControl>
</Typography>
</Box>
)}
</Modal>
);
}
See how much simple it gets when you split the logic. Here is the sandbox: https://codesandbox.io/s/hedk9g
Related
I am able to hide the toolbar icon but i don't have any idea how to positioning pagination bottom to top my another issue is I am trying to add two button (reset and apply )in view-Column toolbar. have. no idea how to customise the class
here I am sharing image for reference as you can see pagination and filter align top right
I am also sharing my working repo please have a look on it. I would appreciate if someone help me to resolve this issue
codesandbox
import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import { Button } from "#material-ui/core";
import { createMuiTheme, MuiThemeProvider } from "#material-ui/core/styles";
class App extends React.Component {
render() {
const columns = ["Name", "Title", "Location", "Age", "Salary"];
const data = [
["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"],
["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000"],
["Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000"],
["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000"],
[
"Blake Duncan",
"Business Management Analyst",
"San Diego",
65,
"$94,000"
],
["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "$210,000"],
["Lane Wilson", "Commercial Specialist", "Omaha", 19, "$65,000"],
["Robin Duncan", "Business Analyst", "Los Angeles", 20, "$77,000"],
["Mel Brooks", "Business Consultant", "Oklahoma City", 37, "$135,000"],
["Harper White", "Attorney", "Pittsburgh", 52, "$420,000"],
["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "$150,000"],
["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000"],
["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000"],
["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000"],
[
"Addison Navarro",
"Business Management Analyst",
"New York",
50,
"$295,000"
],
["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000"],
["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000"],
["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000"],
["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000"],
["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000"],
["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000"],
["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000"],
["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000"],
["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000"],
["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000"],
["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000"],
["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000"],
[
"Gabby Strickland",
"Business Process Consultant",
"Scottsdale",
26,
"$45,000"
],
["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000"]
];
const getMuiTheme = () =>
createMuiTheme({
overrides: {
MuiChip: {
root: {
backgroundColor: "lightgrey"
}
},
MuiTableCell: {
head: {
backgroundColor: "lightgray !important"
}
}
}
});
const HeaderElements = () => (
<>
<Button>1</Button>
<Button>2</Button>
</>
);
const options = {
filterType: "dropdown",
responsive: "scroll",
print: false,
download: false,
hover: false,
filter: false,
search: false,
viewColumns: true,
rowsPerPage: [10],
rowsPerPageOptions: false,
jumpToPage: false,
textLabels: {
pagination: {
next: "Next ",
previous: "Previous",
rowsPerPage: "",
displayRows: "ON"
}
},
onChangePage(currentPage) {
console.log({ currentPage });
},
onChangeRowsPerPage(numberOfRows) {
console.log({ numberOfRows });
}
};
return (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
title={"ACME Employee list"}
data={data}
columns={columns}
options={{
customToolbar: () => <HeaderElements />
}}
/>
</MuiThemeProvider>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
import * as React from "react";
import PropTypes from "prop-types";
import { alpha } from "#mui/material/styles";
import Box from "#mui/material/Box";
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 TableHead from "#mui/material/TableHead";
import TablePagination from "#mui/material/TablePagination";
import TableRow from "#mui/material/TableRow";
import TableSortLabel from "#mui/material/TableSortLabel";
import Toolbar from "#mui/material/Toolbar";
import Typography from "#mui/material/Typography";
import Paper from "#mui/material/Paper";
import Checkbox from "#mui/material/Checkbox";
import IconButton from "#mui/material/IconButton";
import Tooltip from "#mui/material/Tooltip";
import FormControlLabel from "#mui/material/FormControlLabel";
import Switch from "#mui/material/Switch";
import DeleteIcon from "#mui/icons-material/Delete";
import FormatListBulletedIcon from "#mui/icons-material/FormatListBulleted";
import GridViewIcon from "#mui/icons-material/GridView";
import TuneIcon from "#mui/icons-material/Tune";
import { visuallyHidden } from "#mui/utils";
function createData(name, calories, fat, carbs, protein) {
return {
name,
calories,
fat,
carbs,
protein
};
}
const rows = [
createData("Cupcake", 305, 3.7, 67, 4.3),
createData("Donut", 452, 25.0, 51, 4.9),
createData("Eclair", 262, 16.0, 24, 6.0),
createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Honeycomb", 408, 3.2, 87, 6.5),
createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
createData("Jelly Bean", 375, 0.0, 94, 0.0),
createData("KitKat", 518, 26.0, 65, 7.0),
createData("Lollipop", 392, 0.2, 98, 0.0),
createData("Marshmallow", 318, 0, 81, 2.0),
createData("Nougat", 360, 19.0, 9, 37.0),
createData("Oreo", 437, 18.0, 63, 4.0)
];
function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
function getComparator(order, orderBy) {
return order === "desc"
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
// This method is created for cross-browser compatibility, if you don't
// need to support IE11, you can use Array.prototype.sort() directly
function stableSort(array, comparator) {
const stabilizedThis = array.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
const headCells = [
{
id: "name",
numeric: false,
disablePadding: true,
label: "Dessert (100g serving)"
},
{
id: "calories",
numeric: true,
disablePadding: false,
label: "Calories"
},
{
id: "fat",
numeric: true,
disablePadding: false,
label: "Fat (g)"
},
{
id: "carbs",
numeric: true,
disablePadding: false,
label: "Carbs (g)"
},
{
id: "protein",
numeric: true,
disablePadding: false,
label: "Protein (g)"
}
];
function EnhancedTableHead(props) {
const {
onSelectAllClick,
order,
orderBy,
numSelected,
rowCount,
onRequestSort
} = props;
const createSortHandler = (property) => (event) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
color="primary"
indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount}
onChange={onSelectAllClick}
inputProps={{
"aria-label": "select all desserts"
}}
/>
</TableCell>
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align={headCell.numeric ? "right" : "left"}
padding={headCell.disablePadding ? "none" : "normal"}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : "asc"}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<Box component="span" sx={visuallyHidden}>
{order === "desc" ? "sorted descending" : "sorted ascending"}
</Box>
) : null}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
);
}
EnhancedTableHead.propTypes = {
numSelected: PropTypes.number.isRequired,
onRequestSort: PropTypes.func.isRequired,
onSelectAllClick: PropTypes.func.isRequired,
order: PropTypes.oneOf(["asc", "desc"]).isRequired,
orderBy: PropTypes.string.isRequired,
rowCount: PropTypes.number.isRequired
};
const EnhancedTableToolbar = (props) => {
const {
numSelected,
rowsPerPageOptions,
component,
count,
rowsPerPage,
page,
onPageChange,
onRowsPerPageChange
} = props;
return (
<Toolbar
sx={{
pl: { sm: 2 },
pr: { xs: 1, sm: 1 },
...(numSelected > 0 && {
bgcolor: (theme) =>
alpha(
theme.palette.primary.main,
theme.palette.action.activatedOpacity
)
})
}}
>
{numSelected > 0 ? (
<Typography
sx={{ flex: "1 1 100%" }}
color="inherit"
variant="subtitle1"
component="div"
>
{numSelected} selected
</Typography>
) : (
<Typography
sx={{ flex: "1 1 100%" }}
variant="h6"
id="tableTitle"
component="div"
>
Nutrition
</Typography>
)}
{numSelected > 0 ? (
<Tooltip title="Delete">
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
) : (
<>
<Tooltip title="grid view">
<IconButton>
<GridViewIcon />
</IconButton>
</Tooltip>
<Tooltip title="list view">
<IconButton>
<FormatListBulletedIcon />
</IconButton>
</Tooltip>
<Tooltip title="Advance filter">
<IconButton>
<TuneIcon />
</IconButton>
</Tooltip>
<Tooltip title="pagination">
<IconButton>
<TablePagination
rowsPerPageOptions={rowsPerPageOptions}
component={component}
count={count}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={onPageChange}
onRowsPerPageChange={onRowsPerPageChange}
/>
</IconButton>
</Tooltip>
</>
)}
</Toolbar>
);
};
EnhancedTableToolbar.propTypes = {
numSelected: PropTypes.number.isRequired
};
export default function EnhancedTable() {
const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState("calories");
const [selected, setSelected] = React.useState([]);
const [page, setPage] = React.useState(0);
const [dense, setDense] = React.useState(false);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
};
const handleSelectAllClick = (event) => {
if (event.target.checked) {
const newSelecteds = rows.map((n) => n.name);
setSelected(newSelecteds);
return;
}
setSelected([]);
};
const handleClick = (event, name) => {
const selectedIndex = selected.indexOf(name);
let newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(
selected.slice(0, selectedIndex),
selected.slice(selectedIndex + 1)
);
}
setSelected(newSelected);
};
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const handleChangeDense = (event) => {
setDense(event.target.checked);
};
const isSelected = (name) => selected.indexOf(name) !== -1;
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows =
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
return (
<Box sx={{ width: "100%" }}>
<Paper sx={{ width: "100%", mb: 2 }}>
<EnhancedTableToolbar
numSelected={selected.length}
rowsPerPageOptions={false}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
<TableContainer>
<Table
sx={{ minWidth: 750 }}
aria-labelledby="tableTitle"
size={dense ? "small" : "medium"}
>
<EnhancedTableHead
numSelected={selected.length}
order={order}
orderBy={orderBy}
onSelectAllClick={handleSelectAllClick}
onRequestSort={handleRequestSort}
rowCount={rows.length}
/>
<TableBody>
{/* if you don't need to support IE11, you can replace the `stableSort` call with:
rows.slice().sort(getComparator(order, orderBy)) */}
{stableSort(rows, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => {
const isItemSelected = isSelected(row.name);
const labelId = `enhanced-table-checkbox-${index}`;
return (
<TableRow
hover
onClick={(event) => handleClick(event, row.name)}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row.name}
selected={isItemSelected}
>
<TableCell padding="checkbox">
<Checkbox
color="primary"
checked={isItemSelected}
inputProps={{
"aria-labelledby": labelId
}}
/>
</TableCell>
<TableCell
component="th"
id={labelId}
scope="row"
padding="none"
>
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow
style={{
height: (dense ? 33 : 53) * emptyRows
}}
>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
</Paper>
{/* <FormControlLabel
control={<Switch checked={dense} onChange={handleChangeDense} />}
label="Dense padding"
/> */}
</Box>
);
}
Finally I implemented by myself. how we can archive. I tried and search lots of article even i also check MUi github issues But there is no proper definition available on the internet. hope in future that would help other too
I made a function getCategoryNameById to get and match the id of the product and I pass the function as props in the other component to use it but when it's render a else statement which is a "none" string.
Example Data
Product Dummy Data
{
id: 4,
name: "ByProgrammers Sushi",
rating: 4.9,
categories: [1],
priceRating: expensive,
photo: images.japanese_restaurant,
duration: "10 - 15 min",
location: {
latitude: 1.5578068150528928,
longitude: 110.35482523764315,
},
courier: {
avatar: images.avatar_4,
name: "Ahmad"
},
menu: [
{
menuId: 9,
name: "Sushi sets",
photo: images.sushi,
description: "Fresh salmon, sushi rice, fresh juicy avocado",
calories: 100,
price: 50
}
]
},
Dummy Category Data
const categoryData = [
{
id: 1,
name: "Rice",
icon: icons.rice_bowl,
},
The State
const [categories, setCategories] = useState(categoryData)
const [selectedCategory, setSelectedCategory] = useState(null)
const [restaurants, setRestaurants] = useState(restaurantData)
const [currentLocation, setCurrentLocation] = useState(initialCurrentLocation)
The Function
function getCategoryNameById(id) {
let category = categories.filter(a => a.id == id)
if(category.length > 0)
return category[0].name
return "none"
}
Home Component
return (
<HomeComponentContext.Provider value={{
selectedCategory
}}>
<SafeAreaView>
<Top name={currentLocation.streetName}/>
<Categories
item={categories}
funct={onSelectedCategory}
selectcat={selectedCategory}
/>
<Product
products={restaurants}
function={getCategoryNameById}
cate = {categories}
/>
</SafeAreaView>
</HomeComponentContext.Provider>
)
the Usage of the Function in the Product Component
{
props.cate.map((categoryId) => {
return(
<View
key={categoryId}
style={{
flexDirection:'row'
}}
>
<Text style={{ ...FONTS.body3 }}>
{props.function(categoryId)}
</Text>
<Text>.</Text>
</View>
)
})
}
I'm trying to perform CRUD operations in React using react-table-6 library, since its lightweight and has basic functionalities. I dont want my bundle size to be more.
Here is my Code https://codesandbox.io/s/crud-using-react-table-6-rs2r9
Whenever I try to edit and change values using input, the table re-renders. I think the issue is because, the Cell inside the columns re-renders when I change the state. But I'm not able to get a workaround for this. Any help would be appreciated greatly. Thanks.
I did some experiments and found that, react-table-6 library doesn't support input element.
However with contentEditable div, It seems to work perfectly.
Code with Input
import React from "react";
import "./styles.css";
import ReactTable from "react-table-6";
import "react-table-6/react-table.css";
export default function App() {
const [state, setState] = React.useState({
data: [
{
name: "Adam",
age: 20
},
{
name: "Eve",
age: 19
},
{
name: "Abel",
age: 4
},
{
name: "Coin",
age: 5
}
],
edit: {}
});
return (
<ReactTable
data={state.data}
columns={[
{
Header: "Name",
accessor: "name",
Cell: ({ value, ...props }) =>
state.edit.name === props.original.name ? (
<input
value={state.edit.name}
onChange={(e) => {
console.log(e.target.value);
setState({
...state,
edit: { ...state.edit, name: e.target.value }
});
}}
/>
) : (
value
)
},
{
Header: "Age",
accessor: "age"
},
{
Cell: ({ value, ...props }) =>
Object.keys(state.edit).length > 0 &&
state.edit.name === props.original.name ? (
<button>Save</button>
) : (
<button
onClick={(e) => setState({ ...state, edit: props.original })}
>
Edit
</button>
)
}
]}
/>
);
}
Code with content editable div
import React from "react";
import "./styles.css";
import ReactTable from "react-table-6";
import "react-table-6/react-table.css";
export default function App() {
const [state, setState] = React.useState({
data: [
{ id: 1, name: "Adam", age: 20 },
{ id: 2, name: "Eve", age: 19 },
{ id: 3, name: "Abel", age: 4 },
{ id: 4, name: "Coin", age: 5 }
],
edit: {}
});
return (
<ReactTable
data={state.data}
columns={[
{
Header: "Name",
accessor: "name",
Cell: ({ value, ...props }) => (
<div
style={
state.edit.id === props.original.id
? {
backgroundColor: "#ddd",
padding: "5px",
outline: "1px solid #0000ff"
}
: {}
}
contentEditable={state.edit.id === props.original.id}
suppressContentEditableWarning
onBlur={(e) => {
setState({
...state,
edit: { ...state.edit, name: e.target.innerHTML }
});
}}
dangerouslySetInnerHTML={{
__html:
state.edit.id === props.original.id ? state.edit.name : value
}}
/>
)
},
{
Header: "Age",
accessor: "age"
},
{
Cell: ({ value, ...props }) =>
Object.keys(state.edit).length > 0 &&
state.edit.id === props.original.id ? (
<button
onClick={(e) => {
let newdata = state.data;
newdata.map((d) => {
if (d.id === state.edit.id) {
d.name = state.edit.name;
}
return d;
});
console.log(newdata);
setState({ ...state, data: newdata, edit: {} });
}}
>
Save
</button>
) : (
<button
onClick={(e) => setState({ ...state, edit: props.original })}
>
Edit
</button>
)
}
]}
defaultPageSize={5}
/>
);
}
Here in this code I am getting some array value, which is dynamic. On basis of that value I am generating UI. This value may change so according to that UI will change.
Now I have to upload all data on button click to server, I am getting confused.
Like if we have 3 fields static, I can create 3 states and by using that I can pass that value to the API.
But here as I am generating dynamic UI how can I take value and upload.
Below is the array value on basis of that I am generating dynamic form.
formFields: Array(8)
0:
key: "dateOfBirth"
label: "Date of Birth"
model: "model.dateOfBirth"
name: "dateOfBirth"
placeHolder: "DD/MM/YYYY"
position: "1"
required: "true"
type: "date"
__typename: "FormFields"
__proto__: Object
1:
key: "lastRechargedAmount"
label: "Last RCC Amt."
model: "model.lastRechargedAmount"
name: "lastRechargedAmount"
placeHolder: "Amount in Naira"
position: "2"
required: "false"
type: "text"
__typename: "FormFields"
__proto__: Object
2:
key: "stateOfOrigin"
label: "State of Origin"
model: "model.stateOfOrigin"
name: "stateOfOrigin"
placeHolder: "State of origin"
position: "3"
required: "true"
type: "parentSelect"
__typename: "FormFields"
__proto__: Object
3: {type: "childSelect", model: "model.lgaOfOrigin", label: "LGA of Origin", placeHolder: "Enter Lga of origin", key: "lgaOfOrigin", …}
4:
key: "frequentlyDialledNumbers1"
label: "Freq.Dialled No"
model: "model.frequentlyDialledNumbers"
name: "frequentlyDialledNumbers1"
placeHolder: "frequently dialled MSISDN"
position: "5"
required: "true"
type: "text"
__typename: "FormFields"
__proto__: Object
5: {type: "text", model: "model.frequentlyDialledNumbers", label: "Freq.Dialled No", placeHolder: "frequently dialled MSISDN", key: "frequentlyDialledNumbers2", …}
6: {type: "text", model: "model.frequentlyDialledNumbers", label: "Freq.Dialled No", placeHolder: "frequently dialled MSISDN", key: "frequentlyDialledNumbers3", …}
7: {type: "text", model: "model.frequentlyDialledNumbers", label: "Freq.Dialled No", placeHolder: "frequently dialled MSISDN", key: "frequentlyDialledNumbers4", …}
length: 8
The code below I am using to generate UI and on button press I am calling function validatUser(). On button press I have to take all values and send in this function.
class CustomerEvalidation extends Component {
constructor(props) {
super(props);
const { eValidationMasterData } = this.props;
this.state = {
selectedRow: -1,
disableBtn: true,
showSimSwapReason: false,
dateOfBirth: currentDate,
lastName: '',
lgaValue: eValidationMasterData.masterData.lga[0].code,
stateValue: eValidationMasterData.masterData.lga[0].state.name,
stateCode: eValidationMasterData.masterData.lga[0].state.code,
isModalVisible:false
};
}
componentWillUnmount() {
this.setState({
showSimSwapReason: false
});
}
lgaChanged = (key, val) => {
this.handleChangeLga({ field: "lgaValue" }, val);
};
handleChangeLga = (props, e) => {
const { lga } = this.props.eValidationMasterData.masterData;
let tempObj = this.state.lgaValue;
for (let i = 0; lga[i]; i++) {
if (lga[i].code == e) {
const stateData = lga[i].state;
this.setState({
stateValue: stateData.name,
stateCode: stateData.code
})
}
}
tempObj[props.field] = e;
this.setState({ lgaValue: e });
};
validatUser = () => {
const {dateOfBirth,lgaValue,stateCode}=this.state;
const validateUser = {
dateOfBirth: dateOfBirth,
lgaValue:lgaValue,
stateCode:stateCode
}
this.props.verifySecurityQuestions(validateUser);
}
onChangeExp = (e) => {
this.setState({
dateOfBirth: e
})
}
render() {
const { dateOfBirth, lastName, lgaValue, stateValue } = this.state;
const { isCamera, loading, error, securityQuestions, eValidationMasterData,validateUser } = this.props;
const { formFields } = securityQuestions.evalidatorType[0].SelectionList[0];
const { lga } = eValidationMasterData.masterData;
let lgaOptions = [];
lga.map(({ code: value, name: label }) => {
lgaOptions.push({ value, label });
});
return (
<View style={{minHeight: deviceHeight, color:'#fff'}}>
{loading &&
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<OverlaySpinner color="#00678F" />
</View>}
{!isCamera && (
<View style={styles.container}>
{formFields.map((document, index) => {
return (
<View style={{backgroundColor: '#fff' }}
key={index}>
{document.type === 'text' && (
<View style={{ padding: 15}} >
<View style={{ flexDirection: 'row', backgroundColor: '#fff' }}>
<SmallText textColor="grey" text={document.label} />
</View>
<Item style={{ borderColor: '#00fff', borderBottomWidth: 1, marginLeft: 0 }}>
<Input
value={lastName}
keyboardType='default'
onChangeText={(lastName) =>
this.setState({ lastName: lastName.replace(/\s/g, '') })}
/>
</Item>
</View>
)
}
{document.type === 'date' && (
<View style={{ padding: 15}}>
<View style={{
flexDirection: 'row', backgroundColor: '#fff'
}}>
<SmallText textColor="grey" text={document.label} />
</View>
<Item style={{ borderColor: '#00fff', borderBottomWidth: 1, marginLeft: 0 }}>
<DatePicker
minDate={minDate}
maxDate={currentDate}
currentDate={dateOfBirth}
format={format}
width={deviceWidth}
onChange={(dateOfBirth) => this.onChangeExp(dateOfBirth)}
marginLeft={0}
/>
</Item>
</View>
)}
</View>
);
}
)}
</View>
)}
<View style={{ flexDirection: 'column', padding: 15 }}>
<View style={{ flexDirection: 'column', flex:1 }}>
<SelectField options={lgaOptions} value={lgaValue}
onChange={this.lgaChanged} that={this}
label={"LGA of Origin"} />
</View>
<View style={{ flexDirection: 'column' }}>
<View style={{ flexDirection: 'row', backgroundColor: '#fff' }}>
<SmallText textColor="grey" text={"State of Origin"} />
</View>
<Item style={{ borderColor: '#00fff', borderBottomWidth: 1, marginLeft: 0 }}>
<Input
value={stateValue}
keyboardType='default'
onChangeText={(stateValue) =>
this.setState({ stateValue: stateValue.replace(/\s/g, '') })}
/>
</Item>
</View>
<View style={{ paddingBottom: 15, marginTop: 20 }}>
<PrimaryBtn label={'Validate User'} disabled={false}
onPress={() => this.validatUser()} />
</View>
</View>
</View>
);
}
}
export default CustomerEvalidation;
Please check my SupplierForm example hope you will get a lots of information
Constant data
"formFields": [{
"id": "1",
"name": "companyname",
"label": "Company name",
"type": "input",
"placeholder": "",
"returnKeyType": "go"
},
{
"id": "2",
"name": "supplier_type",
"label": "Supplier type",
"type": "drop_down"
},
{
"id": "3",
"name": "country",
"label": "Country",
"type": "drop_down"
},
{
"id": "4",
"name": "phonenumber",
"label": "Mobile number",
"type": "input",
"placeholder": "",
"returnKeyType": "next"
},
{
"id": "5",
"name": "phonenumber1",
"label": "Landline number",
"type": "input",
"placeholder": "",
"returnKeyType": "next"
},
{
"id": "6",
"name": "email",
"label": "Email / UserID",
"type": "input",
"placeholder": "",
"returnKeyType": "next"
},
{
"id": "7",
"name": "contact_person",
"label": "Contact person",
"type": "input",
"placeholder": "",
"returnKeyType": "next"
},
{
"id": "8",
"name": "skype_id",
"label": "Skype id",
"type": "input",
"placeholder": "",
"returnKeyType": "next"
},
{
"id": "9",
"name": "notes",
"label": "Notes",
"type": "input",
"placeholder": "",
"returnKeyType": "go"
}
]
SupplierForm component
// #flow
import * as React from 'react';
import { Div, Button, InputText, DropDown } from '../../materialComponents';
import data from '../../constantData/supplier';
/* flow types
============================================================================= */
type Props = {
action: string,
editData?: ?{
companyname: string,
supplier_type_id: number | string,
country: number | string,
phonenumber: string,
phonenumber1: string,
landlord_email: string,
contact_person: string,
landlord_skype_id: string,
notes: string,
},
data: Object,
buttonLoader: boolean,
onSubmit: (data: Object) => any,
onError: (type: string, msg: string) => any,
};
type State = {
companyname: string,
supplier_type_id: number | string,
country_id: number | string,
phonenumber: string,
phonenumber1: string,
email: string,
contact_person: string,
skype_id: string,
notes: string,
};
/* ============================================================================
<SupplierForm />
============================================================================= */
class SupplierForm extends React.Component<Props, State> {
static defaultProps = { editData: null };
constructor() {
super();
this.state = {
companyname: '',
supplier_type_id: 0,
country_id: 0,
phonenumber: '',
phonenumber1: '',
email: '',
contact_person: '',
skype_id: '',
notes: '',
};
}
componentDidMount() {
const { editData, action } = this.props;
if (action === 'edit') {
const record = { ...editData };
const {
companyname,
supplier_type_id,
country,
phonenumber,
phonenumber1,
landlord_email,
contact_person,
landlord_skype_id,
notes,
} = record;
this.setState({
companyname,
supplier_type_id,
country_id: country,
phonenumber,
phonenumber1,
email: landlord_email,
contact_person,
skype_id: landlord_skype_id,
notes,
});
}
}
// for submit form
_handleSubmit = () => {
const { onError, onSubmit } = this.props;
const {
companyname,
supplier_type_id,
country_id,
phonenumber,
phonenumber1,
email,
contact_person,
skype_id,
notes,
} = this.state;
const supplier = {
companyname,
supplier_type_id,
country_id,
phonenumber,
phonenumber1,
email,
contact_person,
skype_id,
notes,
};
if (!companyname) {
onError('error', 'Please Enter Company Name');
} else if (!Number(supplier_type_id)) {
onError('error', 'Please Select Supplier Type');
} else if (!Number(supplier_type_id)) {
onError('error', 'Please Select Country');
} else if (!email) {
onError('error', 'Please Enter Email');
} else {
onSubmit(supplier);
}
};
/**
* handle picker values
* #param {string} fieldName
* #param {string} value
*/
_handlePickerValue = (pickerName: string, _id: string) => {
this.setState({
[`${pickerName}_id`]: _id,
});
};
/**
* handle input values
* #param {string} fieldName
* #param {string} value
*/
_handleInputValue = (fieldName: string, value: string) => {
this.setState({ [fieldName]: value });
};
/**
* render the all input fields
* #param {Object} dropDownData
*/
_renderInputFields = (dropDownData: Object) => {
const { formFields } = data;
return formFields.map(field => {
if (field.type === 'input') {
return (
<InputText
key={field.id}
label={field.label}
value={this.state[field.name]}
onChangeText={value => this._handleInputValue(field.name, value)}
reference={input => {
// $FlowFixMe
this[`${field.name}_ref`] = input;
}}
returnKeyType={field.returnKeyType}
// $FlowFixMe
onSubmitEditing={() => this[`${field.name}_ref`].focus()}
/>
);
}
if (field.type === 'drop_down') {
const itemData =
field.name === 'country'
? dropDownData.countries
: dropDownData[`${field.name}s`];
const selectedValue = this.state[`${field.name}_id`];
return (
<DropDown
key={field.id}
label={field.label}
data={itemData}
selectedValue={selectedValue}
onChange={value => this._handlePickerValue(field.name, value)}
/>
);
}
return null;
});
};
render() {
const { data: dropDownData, buttonLoader, action } = this.props;
const buttonTitle = action === 'add' ? 'Save' : 'Update';
return (
<Div>
{this._renderInputFields(dropDownData)}
<Button
loader={buttonLoader}
color="#FFFFFF"
backgroundColor="#21A24F"
marginVertical={10}
borderRadius={2}
iconName="save"
title={buttonTitle}
onPress={this._handleSubmit}
/>
</Div>
);
}
}
/* export
============================================================================= */
export default SupplierForm;
sorry, i'm a lazy coder .... i'll try to answer AbriefAP . . .
state is not the only option to hold variables, use/create object and push values there;
var obj1={};
_on_fld_change(document,v){
obj1[document.name]=v;
}
_on_submit(){
return fetch(URL,'POST',{obj1})
}
render(){
...
return(
..
<Comp onValueChange={(v)=>this._on_fld_change(document,v)}/>
)
}
I am a novice at redux and i am trying to incorporate it in my code so the state can be managed more easily. I am trying to map through an array in my state but it is throwing the error below:
Uncaught TypeError: Cannot read property 'map' of undefined
this is the reducer for redux
const initialState = {
workoutlist: [
{
id: uuid.v4(),
name: 'Leg Day',
date: '08-09-2019',
duration: "60",
exerciselist: [
{
id: uuid.v4(),
exerciseName: 'Squats',
numberOfSets: "3",
reps: "12",
weight: "135",
},
{
id: uuid.v4(),
exerciseName: 'Leg press',
numberOfSets: "3",
reps: "10",
weight: "150",
},
{
id: uuid.v4(),
exerciseName: 'Lunges',
numberOfSets: "4",
reps: "12",
weight: "0",
},
],
selected: false,
},
{
id: uuid.v4(),
name: 'Running',
date: '08-11-2019',
duration: "40",
exerciselist: [],
selected: false,
},
],
disabled: true,
page: 1,
}
const workoutList = (state = initialState, action) => {
switch(action.type) {
// Returns whether the panel is selected or not
// and enables Start Workout button if only 1 is selected
case 'SELECT_PANEL':
state = {
workoutlist: state.workoutlist.map(workout => {
if (workout.id === action.id) {
workout.selected = !workout.selected
}
return workout;
})
}
var count = 0;
state.workoutlist.map((workout) => {
if (workout.selected === true) {
count = count + 1;
}
return count;
})
if (count !== 1) {
state = {
...state,
disabled: true
}
} else {
state = {
...state,
disabled: false
}
}
return state;
default:
return state;
}
}
this is the component that where the error is being thrown.
export default function WorkoutItem() {
const handleSelectedPanel = useSelector(state => state.workoutList);
const dispatch = useDispatch();
const { name, date, duration, exerciselist } = handleSelectedPanel;
return (
<ExpansionPanel style={styles.panel} onChange={() => dispatch(selectPanel())}>
<ExpansionPanelSummary>
<Typography variant="button" style={styles.header}>
{name}
</Typography>
<Typography variant="button" style={styles.header}>
{date}
</Typography>
<Typography align="right" style={styles.header}>
~{duration} mins
</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Table size="medium" style={styles.table}>
<TableHead>
<TableRow>
<TableCell padding="none" >Name</TableCell>
<TableCell padding="none" align="right"># of sets</TableCell>
<TableCell padding="none" align="right">average reps</TableCell>
<TableCell padding="none" align="right">weight</TableCell>
</TableRow>
</TableHead>
<TableBody>
{exerciselist.map((exercise) => (
<ExerciseList
key={exercise.id}
exercise={exercise}
/>
))}
</TableBody>
</Table>
<ExpansionPanelActions disableSpacing style={styles.actionButton}>
<EditWorkoutItem
workout={this.props.workout}
handleEditChange={this.props.handleEditChange}
/>
</ExpansionPanelActions>
</ExpansionPanelDetails>
</ExpansionPanel>
)
}
It is supposed to show a list of panels that can be expanded to show the contents but it throws an error saying the exerciselist is undefined in my state apparently.
Any help would be greatly appreciated!
Do you want to access the first item or workoutList ?. From your code handleSelectedPanel seams to be an array not an object. Is your destructuring correct?. Where is your useSelector?. What does console.log(handleSelectedPanel) gives you? Try
const { name, date, duration, exerciselist } = handleSelectedPanel[0];
or
const handleSelectedPanel = useSelector(state => state.workoutList[0]);