title: How can I render a Material UI grid using React without the unique key warning
body: <p>I am using React and Material UI for this project, and need to render a grid where the rows are from an array of data and the columns contain specific information like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;Grid container&gt;
    {myData.map((record) =&gt; (
      &lt;&gt;
        &lt;Grid item&gt;{record.field1}&lt;/Grid&gt;
        &lt;Grid item&gt;{record.field2}&lt;/Grid&gt;
        &lt;Grid item&gt;{record.field3}&lt;/Grid&gt;
      &lt;/&gt;
    )}
  &lt;/Grid&gt;
  </code></pre>
  <p>This of course results in the React warning about items in the list not having unique keys.</p>
  <p>The problem is that <code>&lt; key={index}&gt;</code> is not valid in React, and replacing <code>&lt;&gt;</code> with an actual tag like <code>&lt;div&gt;</code> for example messes up the grid; which expects grid items to be directly contained within the grid container.</p>
  <p>Is there any way to work around this problem?</p>