I am an absolute beginner on React.js. I check similar questions and apply some of them, still, I could not solve the problem. I added the .js file below. I use Django REST API to get data from my SQLite and try to put my data into a table. GET request gives me a JSON file and I try to convert it to a suitable data format.
import React, {Component} from 'react';
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';
const useRowStyles = makeStyles({
root: {
'& > *': {
borderBottom: 'unset',
},
},
});
function createData(name, mail, mss) {
return {
name,
mail,
history: [
{ massage: mss},
],
};
}
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.mail}</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>İçerik</TableCell>
</TableRow>
</TableHead>
<TableBody>
{row.history.map((historyRow) => (
<TableRow key={historyRow.massage}>
<TableCell component="th" scope="row">
{historyRow.massage}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
Row.propTypes = {
row: PropTypes.shape({
name: PropTypes.string.isRequired,
mail: PropTypes.string.isRequired,
history: PropTypes.arrayOf(
PropTypes.shape({
message: PropTypes.string.isRequired,
}),
).isRequired,
}).isRequired,
};
function CollapsibleTable(rows) {
return (
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableHead>
<TableRow>
<TableCell />
<TableCell>Name</TableCell>
<TableCell align="right">Mail</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<Row key={row.name} row={row} />
))}
</TableBody>
</Table>
</TableContainer>
);
}
const rows = [
createData('Frozen yoghurt', "metegenez", "selam"),
createData('Ice cream sandwich', "metegenez", "selam"),
createData('Eclair', "metegenez", "selam"),
createData('Cupcake', "metegenez", "selam"),
createData('Gingerbread', "metegenez", "selam")];
function mapDatasInto() {
return (
this.state.data.map(contact => {
return (
createData(contact)
);
})
);
}
class Tablee extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
loaded: false,
placeholder: "Loading"
};
this.componentDidMount = this.componentDidMount.bind(this);
this.mapDatasInto = this.mapDatasInto.bind(this);
}
componentDidMount() {
fetch("api/lead")
.then(response => {
if (response.status > 400) {
return this.setState(() => {
return {placeholder: "Something went wrong!"};
});
}
console.log(response);
return response.json();
})
.then(data => {
this.setState(() => {
return {
data,
loaded: true
};
});
});
}
mapDatasInto() {
return (
this.state.data.map(contact => {
return (
createData(contact)
);
})
);
}
render() {
return (CollapsibleTable(mapDatasInto()));
}
}
export default Tablee;
I used rows for debugging, but when I use the data in the state, I get an error like this. I believe there is a simple explanation for this.
Uncaught TypeError: Cannot read property 'state' of undefined
at mapDatasInto (Table.js:181)
at Tablee.render (Table.js:242)
at finishClassComponent (react-dom.development.js:17160)
at updateClassComponent (react-dom.development.js:17110)
at beginWork (react-dom.development.js:18620)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at beginWork$1 (react-dom.development.js:23203)
at performUnitOfWork (react-dom.development.js:22157)
