title: Uncaught TypeError: map is not a function In Reactjs with Firebase
body: <p>Hi I am new in React and Firebase database. I am getting error while try to print data using map.  </p>
  
  <p><a href="https://i.stack.imgur.com/5zMC7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5zMC7.png" alt="SNAP01"></a></p>
  
  <p>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</p>
  
  <p><a href="https://i.stack.imgur.com/oNWdG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oNWdG.png" alt="SINGLE USER"></a></p>
  
  <p>Here is my Firebase Data </p>
  
  <p><a href="https://i.stack.imgur.com/WAPl5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WAPl5.png" alt="FIBERBASE"></a></p>
  
  <p>as you see in Database under 0 key users details are given but not under key 1 and 2 </p>
  
  <p>now I am getting error while print user_name while try to access row.users.map() as given under code.</p>
  
  <pre><code>&lt;Table className="MyTable"&gt;
    &lt;TableHead&gt;
      &lt;TableRow&gt;
        &lt;StyledTableCell&gt;Dato&lt;/StyledTableCell&gt;
        &lt;StyledTableCell&gt;User Name&lt;/StyledTableCell&gt;
        &lt;StyledTableCell align="right"&gt;Timer&lt;/StyledTableCell&gt;
      &lt;/TableRow&gt;
    &lt;/TableHead&gt;
    &lt;TableBody&gt;
      {props.data.dayWiseHours.map(row =&gt; (
        &lt;StyledTableRow key={row.date}&gt;
          &lt;StyledTableCell component="th" scope="row"&gt;
            {`${row.date}\n`}
          &lt;/StyledTableCell&gt;
          &lt;StyledTableCell component="td" scope="row"&gt;
            {  row &amp;&amp; row.users &amp;&amp;  
                row.users.map((subData, subindex) =&gt;
                    &lt;span key={subindex}&gt;{subData.user_name}&lt;/span&gt; 
                )
            }
          &lt;/StyledTableCell&gt;
          &lt;StyledTableCell align="right"&gt;
            {`${row.hour}\n`}
          &lt;/StyledTableCell&gt;
        &lt;/StyledTableRow&gt;
      ))}
    &lt;/TableBody&gt;
  &lt;/Table&gt;
  </code></pre>
  
  <p>If I try under given code its working fine  </p>
  
  <pre><code>&lt;TableBody&gt;
      {props.data.dayWiseHours.map(row =&gt; (
        &lt;StyledTableRow key={row.date}&gt;
          &lt;StyledTableCell component="th" scope="row"&gt;
            {`${row.date}\n`}
          &lt;/StyledTableCell&gt;
          &lt;StyledTableCell component="td" scope="row"&gt;
            { row &amp;&amp; row.users &amp;&amp;  row.users['-LjuTOzAhVpku-hDFUJ7'].user_name ? row.users['-LjuTOzAhVpku-hDFUJ7'].user_name : "--" }
          &lt;/StyledTableCell&gt;
          &lt;StyledTableCell align="right"&gt;
            {`${row.hour}\n`}
          &lt;/StyledTableCell&gt;
        &lt;/StyledTableRow&gt;
      ))}
    &lt;/TableBody&gt;
  
  </code></pre>
  
  <p>but key :  <code>row.users['-LjuTOzAhVpku-hDFUJ7']</code> will not be always same.</p>
  
  <p>Thanks  </p>