title: material-ui table not displaying data
body: <p>Hello I'm trying some stuff with material-ui and I'm having problems with displaying my data from my react-context. What I wanna do is display my context (which is an array) in a material-ui table. It's not a problem with the context because when I print out the array there are elements inside with values. So it has to be an issue with the material table classes. If anyone is familiar with these I would appreciate any help.</p>
  <p>This is my component for the table. I'm using the <code>map()</code> function to go through my array twice. Once to test at the top of the return-statement, which worked, and then in the material-ui components which didn't work (didnt display any data).</p>
  <pre><code>export default function PhaseList() {
  
      const classes = useStyles();
  
      const [phases, setPhases] = useContext(PhasesContext);
  
      useEffect(() =&gt; {
          console.log('retrieving phases', phases);
      }, [phases]);
  
      return (
          &lt;&gt;
              &lt;ul&gt;
                  {phases.map((phase) =&gt;
                      &lt;li key={phase.id}&gt;
                          {JSON.stringify(phase)}
                      &lt;/li&gt;
                  )}
              &lt;/ul&gt;
              &lt;TableContainer component={Paper}&gt;
                  &lt;Table className={classes.table} size='small'&gt;
                      &lt;TableHead&gt;
                          &lt;TableRow&gt;
                              &lt;TableCell&gt;phase&lt;/TableCell&gt;
                              &lt;TableCell&gt;name&lt;/TableCell&gt;
                              &lt;TableCell&gt;time&lt;/TableCell&gt;
                              &lt;TableCell&gt;description;&lt;/TableCell&gt;
                          &lt;/TableRow&gt;
                      &lt;/TableHead&gt;
                      &lt;TableBody&gt;
                          {phases.map((phase) =&gt; (
                              &lt;TableRow key={phase.id}&gt;
                                  &lt;TableCell component='th' scope='phase'&gt;
                                      {phase.name}
                                  &lt;/TableCell&gt;
                                  &lt;TableCell&gt;{phase.name}&lt;/TableCell&gt;
                                  &lt;TableCell&gt;{phase.time}&lt;/TableCell&gt;
                                  &lt;TableCell&gt;{phase.description}&lt;/TableCell&gt;
                              &lt;/TableRow&gt;
                          ))}
                      &lt;/TableBody&gt;
                  &lt;/Table&gt;
              &lt;/TableContainer&gt;
  
          &lt;/&gt;
      );
  }
  </code></pre>
  <p>There's no error or anything, when i click the button to add it, it just creates an empty row
  as you can see here.The elements with the values are printed on top, but not in the table.
  The only thing in the console I'm getting is this warning: <em>Warning: Each child in a list should have a unique &quot;key&quot; prop.</em>
  <a href="https://i.stack.imgur.com/vcdSl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vcdSl.png" alt="enter image description here" /></a></p>
  <p>Thanks alot in advance.</p>