const ResultsAccordion = ({projects, projectStatus}) =>
{
return (
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
<Typography>{projectStatus}</Typography>
</AccordionSummary>
<AccordionDetails>
<TableContainer component={Paper} sx={{my:2 }}>
<Table>
<TableHead>
<TableRow style={{ width:"100%" }}>
<TableCell align="center">Team Name</TableCell>
<TableCell align="center">Project Link</TableCell>
<TableCell align="center">Team Members</TableCell>
</TableRow>
</TableHead>
<TableBody>
{
projects.map((value) =>
{
return (
<TableRow key={value.name}>
<TableCell align="center">
{value.name}
</TableCell>
<TableCell align="center">
<Link href={value.repo}>Project Repo</Link>
</TableCell>
<TableCell align="center">
<Stack direction="row" spacing={1} alignContent="center">
{
(value.members).map((item, key) =>
{
return (
<Chip key={key} component="a" href={`https://github.com/${item.github}`} clickable label={item.github} avatar={<Avatar alt={item.github} src={item.avatar}/> } />
);
})
}
</Stack>
</TableCell>
</TableRow>
);
})
}
</TableBody>
</Table>
</TableContainer>
</AccordionDetails>
</Accordion>
);
};
Chips are supposed to be returned in the Table Cell with Stack..
But there is no one.
I used the react Developers tools and there is no childrens in Stack.
The chips are rendered if i made any changes in the prop using ReactDevTools
I checked, the value.members array & it is also not empty.
Related
I have a table with items. I use cookies to save them. Also, I have two buttons (increase and decrease). When I press them to change qty it works, but it also puts the item's row to the bottom of the list. I need to keep them in the same position where they are. I used sortDirection prop to TableCell component to make an order, but it also didn't work. Please help update the code so I can keep items in the same position.
Thanks in advance.
export default function CartItemsTable() {
const [cookies, setCookie, removeCookie] = useCookies();
function IncreaseQTY(article) {
var newCookie = cookies[article];
newCookie.qty++;
setCookie(article, newCookie, {
expires: new Date(Date.now() + 604800000),
});
}
function DecreaseQTY(article) {
var newCookie = cookies[article];
newCookie.qty--;
if (newCookie.qty === 0) {
removeCookie(article);
} else {
setCookie(article, newCookie, {
expires: new Date(Date.now() + 604800000),
});
}
}
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} >
<TableHead>
<TableRow>
<TableCell >Name</TableCell>
<TableCell sortDirection="asc" align="center">Code</TableCell>
<TableCell align="center">Price</TableCell>
<TableCell align="center">QTY</TableCell>
<TableCell align="center">Total</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Object.keys(cookies).map(function (key, index) {
return (
<TableRow
key={index}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell component="th" scope="row">
{cookies[key].name}
</TableCell>
<TableCell align="center">{cookies[key].article}</TableCell>
<TableCell align="center">{cookies[key].price}</TableCell>
<TableCell align="center">
<ButtonGroup
variant="contained"
aria-label="outlined primary button group"
>
<Button
onClick={() => {
DecreaseQTY(cookies[key].article);
}}
>
-
</Button>
<Button variant="text" disableRipple={true}>
{cookies[key].qty}
</Button>
<Button
onClick={() => {
IncreaseQTY(cookies[key].article);
}}
>
+
</Button>
</ButtonGroup>
</TableCell>
<TableCell align="center">
{cookies[key].qty * cookies[key].price}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
);
}
Before I press the button
After I press the increase button, first line went to the bottom
Update
I guess this problem can be occurred because of the cookies order or even related to react-cookie package, so I added console.log(cookies); to IncreaseQTY function. After a couple increasing it starts to show this way
I'm using React, typescript and Material UI. I've created a pretty common "Create user form" with basic inputs for username, name, email, ect. Added two buttons, "Edit" and "Delete." Everything seems to function properly, however, I cannot get this error message resolved.
Warning: validateDOMNesting(...): <td> cannot appear as a child of <div>.
Here's the table from a react component:
<TableContainer className={classes.scroll} component={Paper}>
<Table stickyHeader aria-label="table">
<TableHead>
<TableRow>
<TableCell>Username</TableCell>
<TableCell align="right">First name</TableCell>
<TableCell align="right">Last name</TableCell>
<TableCell align="right">Email</TableCell>
<TableCell align="right">Connect_username</TableCell>
<TableCell align="right">Role</TableCell>
<TableCell align="left">Edit</TableCell>
<TableCell align="left">Delete</TableCell>
</TableRow>
</TableHead>
<TableBody>
{(rowsPerPage > 0
? props?.items.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: props?.items
).map(item => (
<TableRow key={item.user_id}>
<TableCell component="th">{item.username}</TableCell>
<TableCell align="right">{item.first_name}</TableCell>
<TableCell align="right">{item.last_name}</TableCell>
<TableCell align="right">{item.email}</TableCell>
<TableCell align="right">{item.connect_username}</TableCell>
<TableCell align="right">{item.role?.map(r=>r.role).join(",")}</TableCell>
<TableCell>
<Button onClick={() => props.handleEdit(item)}>Edit</Button>
</TableCell>
<TableCell>
<Button onClick={() => props.handleConfirmDelete(item.user_id)}>Delete</Button>
</TableCell>
</TableRow>
))}
</TableBody>
<TablePagination
rowsPerPageOptions={[10, 25, { label: 'All', value: -1 }]}
count={props.items.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Table>
</TableContainer>
component={Paper} is likely causing this. Can you try removing it? If you want the table to appear on a Paper component, then try nesting TableContainer under Paper.
put TablePagination in the TableBody tag and wrap it in TableRow.
Had a similar issue and this fixed it.
Like this:
<TableBody>
{(rowsPerPage > 0
? props?.items.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: props?.items)
.map(item => (
<TableRow key={item.user_id}>
<TableCell component="th">{item.username}</TableCell>
<TableCell align="right">{item.first_name}</TableCell>
<TableCell align="right">{item.last_name}</TableCell>
<TableCell align="right">{item.email}</TableCell>
<TableCell align="right">{item.connect_username}</TableCell>
<TableCell align="right">{item.role?.map(r=>r.role).join(",")}</TableCell>
<TableCell>
<Button onClick={() => props.handleEdit(item)}>
Edit
</Button>
</TableCell>
<TableCell>
<Button onClick={() => props.handleConfirmDelete(item.user_id)}>
Delete
</Button>
</TableCell>
</TableRow>
<TableRow>
<TablePagination
rowsPerPageOptions={[10, 25, { label: 'All', value: -1 }]}
count={props.items.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</TableRow>
))}
</TableBody>
update: "#mui/material": "^5.10.9"
in my case this error was causing TablePagination and not Paper component.
working solution is wrapping pagination not only with row but also footer as follow
<TableContainer component={Paper}>
<Table>
<TableBody>
...
</TableBody>
<TableFooter>
<TableRow>
<TablePagination />
</TableRow>
</TableFooter>
</Table>
</TableContainer>
mui docs: https://mui.com/material-ui/react-table/#custom-pagination-actions
I am trying to make a collapsible row inside a row. Basically I render a bunch of rows with pharmaceutical drugs, and I want someone to click on that row and it would show the description of that pharmaceutical drug.
I thought it was pretty straight forward but my code doesn't seem to work as I get the error I have described on my title.
Here's my code:
<TableContainer component={Paper} style={{overflow: "hidden"}}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell />
<TableCell><strong>Pharmaceutical Drug</strong></TableCell>
<TableCell align="right"><strong>Drug Class</strong></TableCell>
<TableCell align="right"><strong>Adult Dosage</strong></TableCell>
<TableCell align="right"><strong>Pediatric Dosage</strong></TableCell>
<TableCell align="right"><strong>Administration</strong></TableCell>
</TableRow>
</TableHead>
<TableBody>
{drugs.map((drug) => (
<Slide direction="up" in={drugs} mountOnEnter unmountOnExit>
<TableRow key={drug._id}>
<TableCell>
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
<TableCell>{drug.name}</TableCell>
<TableCell align="right">{drug.class}</TableCell>
<TableCell align="right">{drug.suggestedDoseAdult}</TableCell>
<TableCell align="right">{drug.suggestedDosePediatric}</TableCell>
<TableCell align="right">{drug.administered}</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box margin={1}>
<Typography variant="h6" gutterBottom component="div">
{drug.description}
</Typography>
</Box>
</Collapse>
</TableCell>
</TableRow>
</Slide>
))}
</TableBody>
</Table>
</TableContainer>
Here's the error:
TypeError: Cannot read property 'style' of undefined
(anonymous function)
node_modules/#material-ui/core/esm/Slide/Slide.js:214
211 | }, other), function (state, childProps) {
212 | return /*#__PURE__*/React.cloneElement(children, _extends({
213 | ref: handleRef,
> 214 | style: _extends({
| ^ 215 | visibility: state === 'exited' && !inProp ? 'hidden' : undefined
216 | }, style, children.props.style)
217 | }, childProps));
You'll need to import TableContainer from Material UI. Just add this import to the top of your component file and you should be all set.
import { TableContainer } from '#material-ui/core';
The function is called on form submission. at first, it is working as expected but when calling this function on form submit. I get this following error.index.js:1 Warning: React has detected a change in the order of Hooks called by null. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks:
Previous render Next render
useState useState
undefined useState
Here is the code sample :
function TablerowsAdd ( x,i,header,handleRemove, startEditing,editIdx,handleChange,stopEditing,handleRemoveField,fieldIdx,startEditingField,fieldheader) {
const [open, setOpen] = useState(false);
const currentlyEditing = editIdx === i;
return (
<React.Fragment key={`tr-${i}`}>
<TableRow key={`tr-${i}`}>
{header.map((y, k) => (
<TableCell key={`trc-${k}`}>
{currentlyEditing ? (
<TextField
name={y.prop}
onChange={e => handleChange(e, y.prop, i)}
value={x[y.prop]}
/>
) : (
x[y.prop]
)}
</TableCell>
))}
<TableCell>
{currentlyEditing ? (
<CheckIcon onClick={() => stopEditing()} />
) : (
<EditIcon onClick={() => startEditing(i)} />
)}
<DeleteIcon onClick={() => handleRemove(i)} />
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)} >
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box margin={1}>
<Typography variant="h6" gutterBottom component="div">
Fields
</Typography>
<Table size="small" aria-label="purchases">
<TableHead>
<TableRow>
{fieldheader.map((x, i) => (
<TableCell key={`thc-${i}`}>{x.name} </TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{x.fields.map((fieldRow,y) => (
<TableRow key={`tr-${y}`}>
<TableCell>{fieldRow.bitname}</TableCell>
<TableCell>{fieldRow.bitmask}</TableCell>
<TableCell >{fieldRow.bitvalue}</TableCell>
<TableCell >{fieldRow.maskname}</TableCell>
<TableCell > {fieldRow.doc} </TableCell>
<TableCell >
<DeleteIcon onClick={() => handleRemoveField(i,fieldRow.bitname,y)} /> </TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
); };
If call count of TablerowsAdd varies, the call count of useState varies too.
Try using a component: <TablerowsAdd/> instead of method call: TablerowsAdd(). This way useState is called exactly once per component
I have an algorithm for generating a table of two arrays.
data = [mail, cat, dog]
words = [{postman, mailbox, letter}, {kitty, kitten, koshak, kotyara}, {dog, friend}]
The number of "subarrays" in the words array is always equal to the number of elements in the data array.
The data array is the column headings, and the "subarrays" of words must be columns.
My generation algorithm works fine, but the "subarrays" in my implementation are obtained as rows, and as I said, I need to have columns.
<Paper style={{ maxWidth: 936, margin: "auto" }}>
<Table>
<TableHead>
<TableRow>
{data.map((TableRow, i) => (
<TableCell key={i} align="center">
{TableRow.split("_").join(" ")}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{this.state.array.map((user, i) => (
<TableRow key={i}>
{Object.values(user).map((v, j) => (
<TableCell key={j} align="center">
<IconButton>
<AddIcon/>
</IconButton>
{v}
<IconButton>
<RemoveIcon/>
</IconButton>
</TableCell>
))}
</TableRow>
))}
<TableRow>
<TableCell align="center">
<Button variant="contained"
color="primary"
style={{
background:
"linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)"
}}
>Обучить
</Button>
</TableCell>
</TableRow>
</TableBody>
</Table>
</Paper>