Uncaught TypeError: map is not a function In Reactjs with Firebase

Question

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

to me it looks like row.users is an object not array. You can map over array only. To iterate over an object you can use Object.keys(obj). Can you check and let me know the data type of row.users. — Vaibhav Vishal
– Vaibhav Vishal, Commented Aug 16, 2019 at 7:28
You are right row.users is an object. prntscr.com/otdngs, sorry i dn't have database access — Er Parwinder Hirkewal
– Er Parwinder Hirkewal, Commented Aug 16, 2019 at 8:02
problem is solved with Object.keys(obj). Thanks for your help — Er Parwinder Hirkewal
– Er Parwinder Hirkewal, Commented Aug 16, 2019 at 8:30

Vaibhav Vishal · Accepted Answer · 2019-08-16 09:20:04Z

2

Looks like row.users is an Object, you can use map on Array only. To iterate over an Object you can do something like this:

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

Object.keys(object1).map((key) => {
  console.log('key:', key);
  console.log('value:', object1[key]);
});

First create an Array of the keys of the Object, then map that Array.

answered Aug 16, 2019 at 9:20

Vaibhav Vishal

7,2487 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Er Parwinder Hirkewal · Accepted Answer · 2019-08-16 10:00:08Z

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 :

sakhib · Accepted Answer · 2019-08-16 06:02:30Z

0

If you are getting an error while accessing subData.user_name, the property user_name might not exist in that particular subData object. Add a null check for the property as well while printing the user_name

subData.user_name ? subData.user_name : ""

answered Aug 16, 2019 at 6:02

sakhib

993 bronze badges

1 Comment

Er Parwinder Hirkewal Over a year ago

Thanks for answer but i have already tried this, nothing happended

Collectives™ on Stack Overflow

Uncaught TypeError: map is not a function In Reactjs with Firebase

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related