Ad

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.

SNAP01

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

SINGLE USER

Here is my Firebase Data

FIBERBASE

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

Ad

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 :

my final result

Ad
source: stackoverflow.com
Ad