title: Material-UI dataGrid with nested data from redux
body: <p>I am developing a page that fetches data from an API and assembles a table using Material UI and Datagrid. My goal to parse data into the Table. My data looks like this</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
      id: 1,
      device_mrid: "xxx1",
      canaryDeviceId: "xxx",
    },
    {
      id: 2,
      device_mrid: "xxx2",
      canaryDeviceId: "xxx",
    },
    {
      id: 3,
      device_mrid: "xxx3",
      canaryDeviceId: "xxx",
    },</code></pre>
  </div>
  </div>
  </p>
  <p>I was able to create a dataGrid table using fake API and the want to get the end result like this <a href="https://codesandbox.io/s/bold-leakey-eu3cq?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/bold-leakey-eu3cq?file=/src/App.js</a></p>
  <p>I use the redux state <strong>metersList.metersData.data</strong> to save meters data.</p>
  <p>My code is Looking like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useEffect } from "react";
  import { useSelector, useDispatch } from "react-redux";
  import { readWaterMeter } from "./components/actions/waterActions";
  import { FormattedMessage } from "react-intl";
  import { DataGrid } from "@material-ui/data-grid";
  
  export default function WaterNew() {
    const dispatch = useDispatch();
    const metersList = useSelector((state) =&gt; state.waterReducer);
  
    useEffect(() =&gt; {
      dispatch(readWaterMeter());
    }, [dispatch]);
  
    let rows = [];
    rows =
     metersList.metersData.data &amp;&amp;
      metersList.metersData.data.length &gt; 0
        ? metersList.metersData.data.map((obj, index) =&gt; {
            return (rows = {
              id: index,
              device_mrid: obj.device_mrid,
              canaryDeviceId: obj.canaryDeviceId
            });
          })
        : " ";
  
    const columns = [
      {
        field: "device_mrid",
        headerName: "device_mrid",
        flex: 1,
        renderCell: ({ value }) =&gt; &lt;FormattedMessage id={value} /&gt;
      },
      {
        field: "canaryDeviceId",
        headerName: "canaryDeviceId",
        flex: 1,
        renderCell: ({ value }) =&gt; &lt;FormattedMessage id={value} /&gt;
      }
    ];
  
    return (
      &lt;div className="App" style={{ height: "100%", width: "100%" }}&gt;
        &lt;DataGrid rows={rows} columns={columns} /&gt;
        {console.log("metersList", metersList.metersData.data)}
      &lt;/div&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I am able to see my meters data in console.log(return) but not able to map.</p>
  <p>Initially I got this error:</p>
  <blockquote>
  <p>Uncaught (in promise) TypeError: Cannot read property 'length' of undefined</p>
  </blockquote>
  <p>After that I have added length property then I am getting another error like this</p>
  <blockquote>
  <p>Uncaught (in promise) TypeError: e.forEach is not a function</p>
  </blockquote>
  <p>Now I don't know how to proceed....</p>
  <p>And the second issue is I am repeating the renderCell option in Columns, is there any better way to write the renderCell to reduce the lines of code?</p>
  <p>I really appreciate the help.</p>