title: React Material UI Insert and delete row
body: <p>I'm new to react and using free version of 'Devias kit' theme from material ui.
  Now I'm stuck with some issues inserting and deleting rows into the table.
  I have checked that data has been changed when either insert or delete button has been pressed but not showing changes on display.
  these below are my code. 
  please let me know, what has been gone wrong.</p>
  
  <pre><code>//UserTable.js
  
  import React, { useState } from 'react';
  import clsx from 'clsx';
  import PropTypes from 'prop-types';
  import moment from 'moment';
  import PerfectScrollbar from 'react-perfect-scrollbar';
  import { makeStyles } from '@material-ui/styles';
  import uuid from 'uuid/v1';
  import AddCircleIcon from '@material-ui/icons/AddCircle';
  import RemoveCircleIcon from '@material-ui/icons/RemoveCircle';
  import {
    Card,
    CardActions,
    CardContent,
    Checkbox,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
    TablePagination,
    IconButton,
    Dialog,
    DialogActions,
    DialogContent,
    DialogContentText,
    DialogTitle,
    Button
  } from '@material-ui/core';
  
  const useStyles = makeStyles(theme =&gt; ({
  
    root: {
      height: '100%'
    },
    content: {
      padding: 0,
      height: '90%'
    },
    inner: {
      minWidth: 1050
    },
    nameContainer: {
      display: 'flex',
      alignItems: 'center',
    },
    avatar: {
      marginRight: theme.spacing(2)
    },
    actions: {
      justifyContent: 'flex-end',
      height: '10%',
    },
    editRow: {
      // float: 'left'
    },
  }));
  
  const UsersTable = props =&gt; {
  
    const { className, users, ...rest } = props;
  
    const classes = useStyles();
  
    const [selectedUsers, setSelectedUsers] = useState([]);
    const [rowsPerPage, setRowsPerPage] = useState(100);
    const [page, setPage] = useState(0);
    const [open, setOpen] = useState(false);
    const [userSet,setUsers] = useState([]);
  
    const handleSelectAll = event =&gt; {
      const { users } = props;
  
      let selectedUsers;
  
      if (event.target.checked) {
        selectedUsers = users.map(user =&gt; user.id);
      } else {
        selectedUsers = [];
      }
  
      setSelectedUsers(selectedUsers);
    };
  
    const handleSelectOne = (event, id) =&gt; {
      const selectedIndex = selectedUsers.indexOf(id);
      let newSelectedUsers = [];
  
      if (selectedIndex === -1) {
        newSelectedUsers = newSelectedUsers.concat(selectedUsers, id);
      } else if (selectedIndex === 0) {
        newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(1));
      } else if (selectedIndex === selectedUsers.length - 1) {
        newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(0, -1));
      } else if (selectedIndex &gt; 0) {
        newSelectedUsers = newSelectedUsers.concat(
          selectedUsers.slice(0, selectedIndex),
          selectedUsers.slice(selectedIndex + 1)
        );
      }
  
      setSelectedUsers(newSelectedUsers);
    };
  
    const handlePageChange = (event, page) =&gt; {
      setPage(page);
    };
  
    const handleRowsPerPageChange = event =&gt; {
      setRowsPerPage(event.target.value);
    };
  
    const handleRowAdd = () =&gt; {
      let newUserSet = [];
  
      const newRow = {
        id: uuid(),
        name: 'Ekaterina Tankova',
        address: {
          country: 'USA',
          state: 'West Virginia',
          city: 'Parkersburg',
          street: '2849 Fulton Street'
        },
        amount: '300',
        product: '885178382529',
        email: 'ekaterina.tankova@devias.io',
        phone: '304-428-3097',
        avatarUrl: '/images/avatars/avatar_3.png',
        createdAt: 1555016400000
      };
  
      newUserSet = newUserSet.concat(userSet,newRow);
      setUsers(newUserSet);
    }
  
    const handleRowDelete = () =&gt; {
      let newUserSet = users;
  
      for (let i = 0; i &lt; selectedUsers.length; i++) {
        newUserSet = newUserSet.filter(user =&gt; user.id !== selectedUsers[i])
      }
      setUsers(newUserSet);
      handlePopClose();
    }
  
    const handlePopClickOpen = () =&gt; {
      setOpen(true);
    };
  
    const handlePopClose = () =&gt; {
      setOpen(false);
    };
  
    return (
      &lt;Card
        {...rest}
        className={clsx(classes.root, className)}
      &gt;
        &lt;CardContent className={classes.content}&gt;
          &lt;PerfectScrollbar&gt;
            &lt;div className={classes.inner}&gt;
              &lt;Table&gt;
                &lt;TableHead aria-label="sticky table"&gt;
                  &lt;TableRow&gt;
                    &lt;TableCell padding="checkbox"&gt;
                      &lt;Checkbox
                        checked={selectedUsers.length === users.length}
                        color="default"
                        indeterminate={
                          selectedUsers.length &gt; 0 &amp;&amp;
                          selectedUsers.length &lt; users.length
                        }
                        onChange={handleSelectAll}
                      /&gt;
                    &lt;/TableCell&gt;
                    &lt;TableCell&gt;column1&lt;/TableCell&gt;
                    &lt;TableCell&gt;column2&lt;/TableCell&gt;
                    &lt;TableCell&gt;column3&lt;/TableCell&gt;
                    &lt;TableCell&gt;column4&lt;/TableCell&gt;
                    &lt;TableCell&gt;column5&lt;/TableCell&gt;
                    &lt;TableCell&gt;column6&lt;/TableCell&gt;
                    &lt;TableCell&gt;column7&lt;/TableCell&gt;
                    &lt;TableCell&gt;column8&lt;/TableCell&gt;
                    &lt;TableCell&gt;column9&lt;/TableCell&gt;
                  &lt;/TableRow&gt;
                &lt;/TableHead&gt;
                &lt;TableBody&gt;
                  {users.slice(0, rowsPerPage).map(user =&gt; (
                    &lt;TableRow
                      className={classes.tableRow}
                      hover
                      key={user.id}
                      selected={selectedUsers.indexOf(user.id) !== -1}
                    &gt;
                      &lt;TableCell padding="checkbox"&gt;
                        &lt;Checkbox
                          checked={selectedUsers.indexOf(user.id) !== -1}
                          color="default"
                          onChange={event =&gt; handleSelectOne(event, user.id)}
                          value="true"
                        /&gt;
                      &lt;/TableCell&gt;
                      &lt;TableCell&gt;{user.product}&lt;/TableCell&gt;
                      &lt;TableCell&gt;{user.phone}&lt;/TableCell&gt;
                      &lt;TableCell&gt;{moment(user.createdAt).format('DD/MM/YYYY')}&lt;/TableCell&gt;
                      &lt;TableCell&gt;{user.amount}&lt;/TableCell&gt;
                      &lt;TableCell&gt;{moment(user.createdAt).format('DD/MM/YYYY')} &lt;/TableCell&gt;
                      &lt;TableCell&gt;{user.amount}&lt;/TableCell&gt;
                    &lt;/TableRow&gt;
                  ))}
                &lt;/TableBody&gt;
              &lt;/Table&gt;
            &lt;/div&gt;
          &lt;/PerfectScrollbar&gt;
        &lt;/CardContent&gt;
  
  
        &lt;CardActions className={classes.actions}&gt;
          &lt;IconButton 
            className={classes.editRow}
            onClick={handleRowAdd}
          &gt;
            &lt;AddCircleIcon className={classes.editBtn}/&gt;
          &lt;/IconButton&gt;
          &lt;IconButton 
            className={classes.editRow}
            onClick={handlePopClickOpen}
          &gt;
            &lt;RemoveCircleIcon /&gt;
          &lt;/IconButton&gt;
  
          &lt;TablePagination
            component="div"
            count={users.length}
            onChangePage={handlePageChange}
            onChangeRowsPerPage={handleRowsPerPageChange}
            page={page}
            rowsPerPage={rowsPerPage}
            rowsPerPageOptions={[100, 500, 1000, 999999]}
          /&gt;
        &lt;/CardActions&gt;
      &lt;/Card&gt;
    );
  };
  
  UsersTable.propTypes = {
    className: PropTypes.string,
    users: PropTypes.array.isRequired
  };
  
  export default UsersTable;
  </code></pre>
  
  <p>a</p>
  
  <pre><code>// NonRegularList.js
  import React, { useState } from 'react';
  import { makeStyles } from '@material-ui/styles';
  
  import { UsersToolbar, UsersTable } from './components';
  import mockData from './data';
  
  const useStyles = makeStyles(theme =&gt; ({
    root: {
      padding: theme.spacing(3),
      height: '94%',
    },
    content: {
      marginTop: theme.spacing(2),
      height: '100%',
    }
  }));
  
  const NonRegularList = () =&gt; {
    const classes = useStyles();
  
    const [users] = useState(mockData);
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;UsersToolbar /&gt;
        &lt;div className={classes.content}&gt;
          &lt;UsersTable 
            users={users} 
            editable={}
            /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default NonRegularList;
  </code></pre>
  
  <p>this is my structure of views</p>
  
  <p><a href="https://i.stack.imgur.com/M2fWX.png" rel="nofollow noreferrer">enter image description here</a></p>