title: How to create state and assign the rows of material-ui-table with static data
body: <p>I am using the material-UI Table component to make a table in the UI. In the below code, I am adding static data without using state so now I want to know how to assign static data to table rows using state property of react.</p>
  
  <p>I tried below code it is working fine. But now I want to display a table with static data using state property</p>
  
  <pre><code>import React from 'react';
  
  import Table from '@material-ui/core/Table';
  import TableBody from '@material-ui/core/TableBody';
  import TableCell from '@material-ui/core/TableCell';
  import TableHead from '@material-ui/core/TableHead';
  import TableRow from '@material-ui/core/TableRow';
  import Paper from '@material-ui/core/Paper';
  
  
  
  function createData(name, calories, fat, carbs, protein) {
    return { name, calories, fat, carbs, protein };
  }
  
  const rows = [
    createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
    createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
    createData('Eclair', 262, 16.0, 24, 6.0),
    createData('Cupcake', 305, 3.7, 67, 4.3),
    createData('Gingerbread', 356, 16.0, 49, 3.9),
  ];
  
  export default function SimpleTable() {
  
    return (
      &lt;Paper &gt;
        &lt;Table &gt;
          &lt;TableHead&gt;
            &lt;TableRow&gt;
              &lt;TableCell&gt;Dessert (100g serving)&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Calories&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Fat&amp;nbsp;(g)&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Carbs&amp;nbsp;(g)&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Protein&amp;nbsp;(g)&lt;/TableCell&gt;
            &lt;/TableRow&gt;
          &lt;/TableHead&gt;
          &lt;TableBody&gt;
            {rows.map(row =&gt; (
              &lt;TableRow key={row.name}&gt;
                &lt;TableCell component="th" scope="row"&gt;
                  {row.name}
                &lt;/TableCell&gt;
                &lt;TableCell align="right"&gt;{row.calories}&lt;/TableCell&gt;
                &lt;TableCell align="right"&gt;{row.fat}&lt;/TableCell&gt;
                &lt;TableCell align="right"&gt;{row.carbs}&lt;/TableCell&gt;
                &lt;TableCell align="righty"&gt;{row.protein}&lt;/TableCell&gt;
              &lt;/TableRow&gt;
            ))}
          &lt;/TableBody&gt;
        &lt;/Table&gt;
      &lt;/Paper&gt;
    );
  }
  </code></pre>