Uncaught TypeError: Map Is Not A Function In Reactjs With Firebase
Hi I am new in React and Firebase database. I am getting error while try to print data using map.
basically I am using firebase-database and I have displayed the list of all the days for the project including the total amount of hours. under each day I want to show the worker name including the amount of hours worked for single user for that day. Here is Screen-shot
Here is my Firebase Data
as you see in Database under 0 key users details are given but not under key 1 and 2
now I am getting error while print user_name while try to access row.users.map() as given under code.
<Table className="MyTable">
<TableHead>
<TableRow>
<StyledTableCell>Dato</StyledTableCell>
<StyledTableCell>User Name</StyledTableCell>
<StyledTableCell align="right">Timer</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{props.data.dayWiseHours.map(row => (
<StyledTableRow key={row.date}>
<StyledTableCell component="th" scope="row">
{`${row.date}\n`}
</StyledTableCell>
<StyledTableCell component="td" scope="row">
{ row && row.users &&
row.users.map((subData, subindex) =>
<span key={subindex}>{subData.user_name}</span>
)
}
</StyledTableCell>
<StyledTableCell align="right">
{`${row.hour}\n`}
</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
If I try under given code its working fine
<TableBody>
{props.data.dayWiseHours.map(row => (
<StyledTableRow key={row.date}>
<StyledTableCell component="th" scope="row">
{`${row.date}\n`}
</StyledTableCell>
<StyledTableCell component="td" scope="row">
{ row && row.users && row.users['-LjuTOzAhVpku-hDFUJ7'].user_name ? row.users['-LjuTOzAhVpku-hDFUJ7'].user_name : "--" }
</StyledTableCell>
<StyledTableCell align="right">
{`${row.hour}\n`}
</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
but key : row.users['-LjuTOzAhVpku-hDFUJ7']
will not be always same.
Thanks
Answer
I have solve my problem by using @Vaibhav example please check under given Code
{ Array.isArray(props.data.dayWiseHours) ? props.data.dayWiseHours.map(row => (
<StyledTableRow key={row.date}>
<StyledTableCell component="th" scope="row">
{`${row.date}\n`}
</StyledTableCell>
<StyledTableCell component="th" scope="row">
{ row.users?
(
Object.keys(row.users).map( userKey => (
<> <span> { row.users[userKey].user_name? row.users[userKey].user_name : "N/A" } - Working Hours : {row.users[userKey].hour} </span><br/></>
))
) : "--"
}
</StyledTableCell>
<StyledTableCell align="right">
{`${row.hour}\n`}
</StyledTableCell>
</StyledTableRow>
)) : ""
}
and output is :
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?