React map() data not displaying - reactjs

The data does not appear in the table in the view. Importing data from db was confirmed with the console.enter image description here
If it is simply used as list.map(), an error saying that it is not a function occurs. So list && list.length > 0 ? I am using list.map((e).
Or do I have to modify the const [list, setList] = useState code part?
import React, { useEffect, useState } from "react";
import axios from 'axios';
import Navbar from './Navbar';
import Box from '#mui/material/Box';
import Button from '#mui/material/Button';
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 TableRow from '#mui/material/TableRow';
import Paper from '#mui/material/Paper';
export default function Community() {
const [list, setList] = useState([{
inputData: {
post_id: '',
title: '',
writer: ''
},
}]);
useEffect(() => {
axios.get('http://localhost:5000/post/community').then((res) => {
console.log("성공");
console.log(res.data);
setList(res.data);
})
}, [])
return (
<div>
<Navbar />
<Box>
<Button sx={{ fontWeight: 'bold' }} href="/newpost">게시글 등록</Button>
</Box>
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell sx={{ fontWeight: 'bold' }}>Post_id</TableCell>
<TableCell sx={{ fontWeight: 'bold' }}>Title</TableCell>
<TableCell sx={{ fontWeight: 'bold' }} align="right">Writer</TableCell>
</TableRow>
</TableHead>
{list && list.length > 0 ? list.map((e) => {
return (
<TableBody>
<TableRow key={e.post_id}>
<TableCell component="th" scope="row">{e.post_id}</TableCell>
<TableCell align="right">{e.title}</TableCell>
<TableCell align="right">{e.writer}</TableCell>
</TableRow>
</TableBody>
)
}) : ""}
</Table>
</TableContainer>
</div>
);
}

Your first state is set up wrong which is then causing the map not to update the state data. It will only mutate not update.
Change
const [list, setList] = useState([{
inputData: {
post_id: '',
title: '',
writer: ''
},
}]);
To this
const [list, setList] = useState([])

Related

How can I Show Only my Videos in Django-Rest-Framework?

I'm using Django and React to create YouTube clone.
And I have an admin panel where user can delete and edit his videos.
But the problem is that it showing my videos and other users videos.
How can make that the admin panel will show only my videos?
views.py Api Views
class AdminVideoDetail(generics.RetrieveAPIView):
permission_classes = [IsAuthenticated]
quesryset = Video.objects.all()
serializer_class = VideoSerializer
videos.js Videos in the admin panel
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Container from '#material-ui/core/Container';
import Link from '#material-ui/core/Link';
import Paper from '#material-ui/core/Paper';
import Table from '#material-ui/core/Table';
import TableBody from '#material-ui/core/TableBody';
import TableCell from '#material-ui/core/TableCell';
import TableContainer from '#material-ui/core/TableContainer';
import TableHead from '#material-ui/core/TableHead';
import TableRow from '#material-ui/core/TableRow';
import DeleteForeverIcon from '#material-ui/icons/DeleteForever';
import EditIcon from '#material-ui/icons/Edit';
import Button from '#material-ui/core/Button';
const useStyles = makeStyles((theme) => ({
cardMedia: {
paddingTop: '56.25%', // 16:9
},
link: {
margin: theme.spacing(1, 1.5),
},
cardHeader: {
backgroundColor:
theme.palette.type === 'light'
? theme.palette.grey[200]
: theme.palette.grey[700],
},
videoTitle: {
fontSize: '16px',
textAlign: 'left',
},
videoText: {
display: 'flex',
justifyContent: 'left',
alignItems: 'baseline',
fontSize: '12px',
textAlign: 'left',
marginBottom: theme.spacing(2),
},
}));
const Videos = (props) => {
const { videos } = props;
const classes = useStyles();
if (!videos || videos.length === 0) return <Button href={'/admin/create'} variant="contained" color="primary">New Video</Button>;
return (
<React.Fragment>
<Container maxWidth="md" component="main">
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
<TableCell>Id</TableCell>
<TableCell align="left">Title</TableCell>
<TableCell align="left">Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{videos.map((video) => {
return (
<TableRow>
<TableCell component="th" scope="row">
{video.id}
</TableCell>
<TableCell align="left">
<Link
color="textPrimary"
href={'/video/' + video.id}
className={classes.link}
>
{video.title}
</Link>
</TableCell>
<TableCell align="left">
<Link
color="textPrimary"
href={'/admin/edit/' + video.id}
className={classes.link}
>
<EditIcon></EditIcon>
</Link>
<Link
color="textPrimary"
href={'/admin/delete/' + video.id}
className={classes.link}
>
<DeleteForeverIcon></DeleteForeverIcon>
</Link>
</TableCell>
</TableRow>
);
})}
<TableRow>
<TableCell colSpan={4} align="right">
<Button
href={'/admin/create'}
variant="contained"
color="primary"
>
New Video
</Button>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Paper>
</Container>
</React.Fragment>
);
};
export default Videos;
If you want to look at the whole project, here is github: https://github.com/PHILLyaHI/diplom-work
Create a python module named permissions.py
add these line of code
from rest_framework import permissions
class IsOwnerOrReadOnly(permissions.BasePermission):
"""
"""
def has_object_permission(self, request, view, obj):
# I check if the request is of type GET or OPTIONS
#I return true, that the use is able to access on this views
if request.method in permissions.SAFE_METHODS:
return True
return obj.owner == request.user
"""
Instance must have an attribute named `owner` or you can change owner with the name of your models fields `user = models.ForeignKey(UserModel, on_delete=models.casscade).
"""
After, go in your views.py module, add
class AdminVideoDetail(generics.RetrieveAPIView):
permission_classes = [IsAuthenticated, IsOwnerOrReadOnly]
quesryset = Video.objects.all()
serializer_class = VideoSerializer
Only videos of owner will be fetch

MUI table Row collapse squashed into one cell when expanded and alignment error

Trying to use MUI table with Collapse to expand/collapse rows. However when using collapse, the the expanded rows are squashed into one cell. How can I align the expanded cells to the parent table cells in a material-ui table?
what i tried is on this link https://codesandbox.io/s/affectionate-leaf-lhb47z
CODE
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core/styles";
import Grid from "#material-ui/core/Grid";
import Card from "#material-ui/core/Card";
import CardHeader from "#material-ui/core/CardHeader";
import Table from "#material-ui/core/Table";
import TableBody from "#material-ui/core/TableBody";
import TableCell from "#material-ui/core/TableCell";
import TableHead from "#material-ui/core/TableHead";
import TableRow from "#material-ui/core/TableRow";
import Paper from "#material-ui/core/Paper";
import TableContainer from "#material-ui/core/TableContainer";
import IconButton from "#material-ui/core/IconButton";
import KeyboardArrowDownIcon from "#material-ui/icons/KeyboardArrowDown";
import KeyboardArrowUpIcon from "#material-ui/icons/KeyboardArrowUp";
const useStyles = makeStyles((theme) => ({
header: {
backgroundColor: "white",
color: "#546e7a",
justifyContent: "left",
padding: "10px 0px",
fontWeight: "bold"
},
content: {
padding: 0
},
status: {
marginRight: "5px"
},
actions: {
justifyContent: "flex-end"
},
summaryTable: {
width: "auto",
marginBottom: "10px",
pointerEvents: "none"
},
noBorder: {
border: "none"
},
denseCell: {
padding: "5px"
},
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
inputGroup: {
marginBottom: theme.spacing(1)
}
}));
const data1 = [
{
amount: 400.0,
dr_cr: "dr",
ledgerName: "Furniture"
},
{
amount: 10,
dr_cr: "dr",
ledgerName: "chocolate"
},
{
amount: 100.0,
dr_cr: "dr",
ledgerName: "goods purchase"
}
];
const data = [
{
amount: 510.0,
dr_cr: "dr",
ledgerName: "Assets"
},
{
amount: 5,
dr_cr: "cr",
ledgerName: "Liability"
}
];
const ExpandableTableRow = ({ children, expandComponent, ...otherProps }) => {
const [isExpanded, setIsExpanded] = React.useState(false);
return (
<>
<TableRow {...otherProps}>
<TableCell padding="checkbox">
<IconButton onClick={() => setIsExpanded(!isExpanded)}>
{isExpanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
{children}
</TableRow>
{isExpanded && (
<TableRow>
<TableCell/>
{expandComponent}
</TableRow>
)}
</>
);
};
export default function App() {
const classes = useStyles();
const [records, setRecords] = useState(data || []);
const [records1, setRecords1] = useState(data1 || []);
return (
<div className="App">
<Grid item lg={12} md={12} xs={12}>
<Card>
<CardHeader
className={classes.header}
title={"Report"}
classes={{
title: classes.header
}}
/>
<Table stickyHeader>
<TableHead>
<TableRow>
<TableCell />
<TableCell>LedgerName</TableCell>
<TableCell>Debit</TableCell>
<TableCell>Credit</TableCell>
</TableRow>
</TableHead>
<TableBody>
{records.map((item) => (
<ExpandableTableRow
key={item.ledgerName}
expandComponent={
<Table>
<TableBody>
{records1.map((i) => (
<TableRow>
<TableCell>{i.ledgerName}</TableCell>
<TableCell>
{i.dr_cr === "dr" ? Math.round(i.amount, 2) : 0}
</TableCell>
<TableCell>
{i.dr_cr === "cr" ? Math.round(i.amount, 2) : 0}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
}
>
<TableCell>{item.ledgerName}</TableCell>
<TableCell>
{item.dr_cr === "dr" ? Math.round(item.amount, 2) : 0}
</TableCell>
<TableCell>
{item.dr_cr === "cr" ? Math.round(item.amount, 2) : 0}
</TableCell>
</ExpandableTableRow>
))}
</TableBody>
</Table>
</Card>
</Grid>
</div>
);
}

Appending to object using react State

I've been stuck on this problem for a few hours, and I do not see how to resolve it.
I use material-UI tables to display data. The current setup populates dropdown options, from where the user can select a combination.
That selection is set into state, and it is displayed on the table. The problem arises when I make a second selection, where instead of appending the data, it overwrites the old data.
The final result should be a list of options. Not just the latest submission.
Lastly, I am passing only one arg for testing purposes; in production will have four args.
Any help is appreciated.
**main Page**
const [dropdownState, setDropdownState] = useState({
GridLOE: "",
GridSelect: "",
});
const handleDropdown = (event) => {
setDropdownState({
...dropdownState,
[event.target.name]: event.target.value,
});
};
const gridLineOfEffortData = [
"Crisis",
"Activities",
"Conflicts",
"Networks",
"Prioritization",
]
const gridLineOfEffortOptionsData = [
"Minimal",
"Enhancing",
"Critical",
]
// DATA GRID
const [dataGrid, setDataGrid] = useState({
data: []
})
function createData(loeName, minimal, enhancing, critical) {
return { loeName, minimal, enhancing, critical }
}
const handleGrid = () => {
setDataGrid({
...dataGrid,
data: [
createData(dropdownState.GridLOE)
]
})
console.log(dropdownState.GridLOE)
};
main page select dropdown and submit
<Grid container spacing={5} padding={3}>
<Grid item lg={12} sm={12} xs={12}>
<TableGridPrioritization
rows={dataGrid.data}></TableGridPrioritization>
</Grid>
<Grid item lg={4} sm={6} xs={12}>
<FieldDropdown
selectId={"GridLOE"}
selectTitle={"Select LOE"}
selectValue={dropdownState.GridLOE}
selectList={gridLineOfEffortData}
handleChange={handleDropdown}
>
</FieldDropdown>
</Grid>
<Grid item lg={4} sm={6} xs={12}>
<FieldDropdown
selectId={"GridSelect"}
selectTitle={"Minimal, enhancing, or critical"}
selectValue={dropdownState.GridSelect}
selectList={gridLineOfEffortOptionsData}
handleChange={handleDropdown}
>
</FieldDropdown>
</Grid>
<Grid item lg={4} sm={6} xs={12}>
<Button variant="contained" color="secondary" size="large" onClick={handleGrid}>ADD TO GRID</Button>
</Grid>
imported component
// BASIC
import React from "react";
import { withStyles } from "#material-ui/core/styles";
import styles from "../../components/RoutingTool/Theme";
// NEEDS REMOVING
import { makeStyles } from '#material-ui/core/styles';
// ELEMENTS
import Table from '#material-ui/core/Table';
import TableBody from '#material-ui/core/TableBody';
import TableCell from '#material-ui/core/TableCell';
import TableContainer from '#material-ui/core/TableContainer';
import TableHead from '#material-ui/core/TableHead';
import TableRow from '#material-ui/core/TableRow';
import Paper from '#material-ui/core/Paper';
const StyledTableCell = withStyles((theme) => ({
head: {
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,
},
body: {
fontSize: 14,
},
}))(TableCell);
const StyledTableRow = withStyles((theme) => ({
root: {
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
},
},
}))(TableRow);
const useStyles = makeStyles({
table: {
minWidth: 700,
},
});
export const TableGridPrioritization = props => {
const classes = useStyles();
return (
<TableContainer component={Paper} className={props.classes.tablePrioritizationDataGrid}>
<Table className={classes.table} aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell>Line of Effort</StyledTableCell>
<StyledTableCell align="right">Minimal</StyledTableCell>
<StyledTableCell align="right">Enhancing</StyledTableCell>
<StyledTableCell align="right">Critical</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{props.rows.map((row) => (
<StyledTableRow key={row.loeName}>
<StyledTableCell component="th" scope="row">
{row.loeName}
</StyledTableCell>
<StyledTableCell align="right">{row.minimal}</StyledTableCell>
<StyledTableCell align="right">{row.enhancing}</StyledTableCell>
<StyledTableCell align="right">{row.critical}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
As your dataGrid is an object with data in it you need to get all the current data instead of the current dataGrid but doing data:[...data, NEWDATA]. The below code should work.
// DATA GRID
const [dataGrid, setDataGrid] = useState({
data: []
})
const handleGrid = () => {
setDataGrid({
data: [...dataGrid.data,
createData(dropdownState.GridLOE)
]
})
console.log(dropdownState.GridLOE)
};

How to display state object elements in another component?

i'm trying to use a table from MaterialUI and populate it with financial data (using promise API). I have three components:
Gl.js
myTable
index.js
I want to use the state object in the Gl.js component and populate the table in myTable.js but not sure how to. Please ask for more details if necessary, I must complete this project.
GL.js
import React, { Component, createContext, Provider } from 'react';
import ReactDOM from 'react-dom';
import axios from "axios";
import CollapsibleTable from './myTable';
export const CTX = React.createContext();
class Gl extends React.Component {
_isMounted = false;
constructor(props) {
super(props)
this.state = {
applBs: []
}
}
getData() {
const axios = require("axios");
axios({
"method": "GET",
"url": "https://fmpcloud.p.rapidapi.com/balance-sheet-statement/AAPL",
"headers": {
"content-type": "application/octet-stream",
"x-rapidapi-host": "fmpcloud.p.rapidapi.com",
"x-rapidapi-key": "4560d76562msh36c4de0a03c6e54p1bf4a2jsne2d882693304",
"useQueryString": true
}, "params": {
"period": "annual",
"apikey": "demo"
}
})
.then(response => {
if (this._isMounted) {
this.setState({ applBs: response.data[0] })
}
})
.catch(error => {
console.log(error)
})
}
componentDidMount() {
this._isMounted = true;
this.getData();
}
componentWillUnamount() {
this._isMounted = false;
}
render() {
return (
<div>
<CollapsibleTable callData={this.state.applBs} />
<CTX.Provider value={ this.state.applBs }>
{this.props.children}
</CTX.Provider>
</div>
)
}
}
ReactDOM.render(<Gl />, document.getElementById("root"))
export default Gl
myTable.js
import React, { Component, Consumer } from 'react';
import ReactDOM from "react-dom"
import PropTypes from 'prop-types';
import { makeStyles } from '#material-ui/core/styles';
import Box from '#material-ui/core/Box';
import Collapse from '#material-ui/core/Collapse';
import IconButton from '#material-ui/core/IconButton';
import Table from '#material-ui/core/Table';
import TableBody from '#material-ui/core/TableBody';
import TableCell from '#material-ui/core/TableCell';
import TableContainer from '#material-ui/core/TableContainer';
import TableHead from '#material-ui/core/TableHead';
import TableRow from '#material-ui/core/TableRow';
import Typography from '#material-ui/core/Typography';
import Paper from '#material-ui/core/Paper';
import KeyboardArrowDownIcon from '#material-ui/icons/KeyboardArrowDown';
import KeyboardArrowUpIcon from '#material-ui/icons/KeyboardArrowUp';
import CTX from "./GL.js"
const useRowStyles = makeStyles({
root: {
'& > *': {
borderBottom: 'unset',
},
},
});
function createData(name, calories, fat, carbs, protein, price) {
return {
name,
calories,
fat,
carbs,
protein,
price,
history: [
{ lineItem: 'Pop', date: '2020-01-05', customerId: '11091700', amount: 3 },
{ lineItem: 'Pop', date: '2020-01-02', customerId: 'Anonymous', amount: 1 },
],
};
}
function Row(props) {
const { row } = props;
const [open, setOpen] = React.useState(false);
const classes = useRowStyles();
return (
<React.Fragment>
<TableRow className={classes.root}>
<TableCell>
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
<TableCell component="th" scope="row">
{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>
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box margin={1}>
<Typography variant="h6" gutterBottom component="div">
History
</Typography>
<Table size="small" aria-label="purchases">
<TableHead>
<TableRow>
<TableCell>
Line Item
</TableCell>
<TableCell>
Google
</TableCell>
<TableCell>
Customer
</TableCell>
<TableCell align="right">
Amount
</TableCell>
<TableCell align="right">
Total price ($)
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{row.history.map((historyRow) => (
<TableRow key={historyRow.date}>
<TableCell component="th" scope="row">
{historyRow.date}
</TableCell>
<TableCell>{historyRow.customerId}</TableCell>
<TableCell align="right">{historyRow.amount}</TableCell>
<TableCell align="right">
{Math.round(historyRow.amount * row.price * 100) / 100}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
Row.propTypes = {
row: PropTypes.shape({
calories: PropTypes.number.isRequired,
carbs: PropTypes.number.isRequired,
fat: PropTypes.number.isRequired,
history: PropTypes.arrayOf(
PropTypes.shape({
amount: PropTypes.number.isRequired,
customerId: PropTypes.string.isRequired,
date: PropTypes.string.isRequired,
}),
).isRequired,
name: PropTypes.string.isRequired,
price: PropTypes.number.isRequired,
protein: PropTypes.number.isRequired,
}).isRequired,
};
const rows = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0, 3.99),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 4.99),
createData('Eclair', 262, 16.0, 24, 6.0, 3.79),
createData('Cupcake', 305, 3.7, 67, 4.3, 2.5),
createData('Gingerbread', 356, 16.0, 49, 3.9, 1.5),
];
export default function CollapsibleTable() {
return (
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableHead>
<TableRow>
<TableCell />
<TableCell>
Apple.Inc
</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<Row key={row.name} row={row} />
))}
</TableBody>
</Table>
</TableContainer>
);
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Gl from './GL';
import CollapsibleTable from './myTable';
ReactDOM.render(
<React.StrictMode>
<Gl >
<CollapsibleTable />
</Gl>
</React.StrictMode>,
document.getElementById('root'));
ok then this must be the issue be clear with class and functional component this keyword can be used only in class component!!
check this link for further reference link
in your case have a console in
<TableContainer component={Paper}>
{console.log('callData', props.callData)}
<Table aria-label="collapsible table">
you will get the value of callData use that to display in table

Passing Arguments to Event Handlers

I'd be grateful if you could help me with my problem.
I've written a component to demonstrate the information of an array which includes both index.js and TableData.js files.Transferring the information of array from index.js to TableData in order to demonstrating them.
I passed the arguments to event handler correctly but I get an error. What's the problem with my code? In which part have I made a mistake?
App.js
import React, {Component, Fragment} from 'react';
import {TableData} from './Layouts'
class App extends Component {
state = {
productList: [
{id: 11, name: 'CD', price: '2000', describe: 'Educational'},
{id: 24, name: 'Pen', price: '3500', describe: 'Design'},
{id: 83, name: 'Pencil', price: '2500', describe: 'Design'}
],
};
handleDeleteByIndex = index => {
const product = this.state.productList;
product.splice(index, 1);
this.setState({productList: product});
};
render() {
const {productList} = this.state;
return (
<Fragment>
<TableData rows={productList} onDeleteRow={this.handleDeleteByIndex}/>
</Fragment>
);
}
}
export default App
TableData.js
import React from 'react';
import {makeStyles} from '#material-ui/core/styles';
import {
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Paper
} from '#material-ui/core';
//****** Style CSS ******
const useStyles = makeStyles({
root: {
width: '100%',
overflowX: 'auto'
},
table: {
minWidth: 650
}
});
const test = 'right';
const TableData= (props) => {
const classes = useStyles();
return (
<Paper className={classes.root}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Name Product</TableCell>
<TableCell align="right">Price</TableCell>
<TableCell align="right">Describe</TableCell>
</TableRow>
</TableHead>
<TableBody>
{props.rows.map((item, index) => (
<TableRow key={item.id}>
<TableCell component="th" scope="row">
{item.name}
</TableCell>
<TableCell align={test} data={item.name}>{item.price}</TableCell>
<TableCell align="right">{item.describe}</TableCell>
<TableCell align="right">
<button onClick={() => props.handleDeleteByIndex(index)}>
DEL
</button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
);
};
export default TableData
You are calling a function that does not exist. The passed down function in props is called onDeleteRow, not handleDeleteByIndex.
Just change it into:
onClick={() => props.onDeleteRow(index)}

Resources