TypeError: Cannot read properties of null (reading 'username') at LeadAdmin.js:121:1 - node.js

Question

I am Populating 'owner' field from My 'lead' document in moongose MERN,
it was working perfectly fine but after somer days its going on type erros of reading null
this is the errror
i am excepting to access the poppulated fields of user from lead (in lead -> owner field)
here my lead.js route
router.get('/', auth, (req, res) => {
User.findById(req.user.id).then((user) => {
if (user.isadmin) {
Lead.find({})
.populate({ path: 'owner', options: { sort: { recieveddate: -1 } } })
.exec((err, lead) => {
if (err) throw err;
// console.log(lead)
res.json(lead);
});
} else {
Lead.find({ owner: user._id })
.sort({ recieveddate: -1 })
.then((leads) => res.json(leads));
}
});
});
here my react rendering page
in map funtion
import * as React from 'react';
import { styled } from '#mui/material/styles';
import Table from '#mui/material/Table';
import TableBody from '#mui/material/TableBody';
import TableCell, { tableCellClasses } 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';
import { Container } from '#mui/material';
import Stack from '#mui/material/Stack';
import Button from '#mui/material/Button';
import { connect } from 'react-redux';
import { getLeads, deleteLead } from '../../actions/leadActions'
// import ItemModal from './ItemModal';
import PropTypes from 'prop-types';
import { Component } from 'react';
import SendMail from '../client/SendMail';
import moment from 'moment';
import DeleteLead from './DeleteLead';
import AssignLead from './AssignLead';
import UpdateLead from './UpdateLead';
import UpdateStatus from '../client/UpdateStatus';
import SendMsg from '../client/SendMsg';
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,
},
[`&.${tableCellClasses.body}`]: {
fontSize: 14,
},
}));
const StyledTableRow = styled(TableRow)(({ theme }) => ({
'&:nth-of-type(odd)': {
// backgroundColor: 'green',
},
// hide last border
'&:last-child td, &:last-child th': {
border: 0,
},
}));
function createData(fullName, email, phoneNo, leadId, make, model, year, vehicleType, recievedDate, actions) {
return { fullName, email, phoneNo, leadId, make, model, year, vehicleType, recievedDate, actions };
}
class LeadAdmin extends Component {
static propTypes = {
auth: PropTypes.object.isRequired,
lead: PropTypes.object.isRequired
}
componentDidMount() {
this.props.getLeads();
this.interval = setInterval(() => { this.props.getLeads() }, 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
// componentDidUpdate() {
// this.props.getLeads();
// }
render() {
const { leads, loading } = this.props.lead;
const { user } = this.props.auth;
return (
<Container sx={{ width: 1400 }} >
<TableContainer component={Paper} sx={{ maxHeight: 500, maxWidth: 1600, overflowY: 'scroll' }} >
<Table sx={{ minWidth: 1600 }} aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell>FullName </StyledTableCell>
<StyledTableCell align="center">Email</StyledTableCell>
<StyledTableCell align="center">Phone NO </StyledTableCell>
<StyledTableCell align="center">Assigned To </StyledTableCell>
<StyledTableCell align="center">Lead Id </StyledTableCell>
<StyledTableCell align="center">Make </StyledTableCell>
<StyledTableCell align="center">Model </StyledTableCell>
<StyledTableCell align="center">Year </StyledTableCell>
<StyledTableCell align="center">Vehicle Type </StyledTableCell>
<StyledTableCell align="center">Recieved Date </StyledTableCell>
<StyledTableCell align="center">Time </StyledTableCell>
<StyledTableCell sx={{ width: 300 }} align="center">Actions</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{leads.map((row) => (
<StyledTableRow key={row.fullname} sx={row.isassigned ? user.isadmin ? { backgroundColor: '#8EE2B8' } : { backgroundColor: '' } : ''} >
{row.status == 'lead' ?
<>
<StyledTableCell component="th" scope="row">
{row.fullname}
</StyledTableCell>
<StyledTableCell align="center">{row.email}</StyledTableCell>
<StyledTableCell align="center">{row.phoneno}</StyledTableCell>
<StyledTableCell align="center">{row.owner.username? row.owner.username : 'N/A'}</StyledTableCell>
<StyledTableCell align="center">{row._id}</StyledTableCell>
<StyledTableCell align="center">{row.make}</StyledTableCell>
<StyledTableCell align="center">{row.model}</StyledTableCell>
<StyledTableCell align="center">{row.modelyear}</StyledTableCell>
<StyledTableCell align="center">{row.vehicletype}</StyledTableCell>
<StyledTableCell align="center">{moment(row.recieveddate).format("ddd, MMM D YYYY")}</StyledTableCell>
<StyledTableCell align="center">{moment(row.recieveddate).format("h:mm a")}</StyledTableCell>
<StyledTableCell align="center" >
<Stack spacing={2} direction="row">
{user.isadmin ?
<>
<Button variant="contained" sx={{ width: 80, backgroundColor: 'black', borderRadius: 50 }}>Cherry</Button>
<UpdateLead {...row} />
<DeleteLead id={row._id} name={row.fullname} />
<AssignLead leadid={row._id} isassigned={row.isassigned} />
</>
:
<>
<SendMail email={row.email} />
<SendMsg {...row} />
<Button variant="contained" sx={{ width: 80, backgroundColor: 'black', borderRadius: 50 }} >Orange</Button>
<UpdateStatus leadid={row._id} />
<UpdateLead {...row} />
</>
}
</Stack>
</StyledTableCell>
</>
: ''}
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Container>
);
}
}
LeadAdmin.propTypes = {
getLeads: PropTypes.func.isRequired,
lead: PropTypes.object.isRequired
}
const mapStateToProps = (state) => ({
lead: state.lead,
auth: state.auth,
})
export default connect(mapStateToProps, { getLeads })(LeadAdmin);

Answer 1

you are accessing json to 3 level row.owner.username, in some row.owner does not have any value i.e is undefined , update your code as below
<StyledTableCell align="center">{row?.owner?.username? row?.owner?.username : 'N/A'}</StyledTableCell>