How to implement delete function of a row in MUI DataGrid (js)

Question

I have delete icon button in my grid, in each row. It doesn't delete a row however. Could anyone help, please?

I am creating a todo app, and each row got to have its own delete button. For some reason, I can't connect deleteTodo component to that button.

import React, { useState } from 'react';
import './App.css';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
import Tooltip from '@mui/material/Tooltip';
import SaveIcon from '@mui/icons-material/Save';
import { DataGrid } from '@mui/x-data-grid';

export default function App() {
const [todo, setTodo] = useState({description: '', date: ''});
const [todos, setTodos] = useState([]);

const inputChanged = (event) => {
  setTodo({...todo, [event.target.name]: event.target.value});
}

const addTodo = () => {
  const newTodo = {...todo, id: new Date().toString()}
  setTodos([...todos, newTodo]);
  setTodo({description: '', date: ''});
}

const deleteTodo = (row) => {
  setTodos(todos.filter((todo, index) => index !== row));
}

const columns = [
  {field: 'description', headerName: 'Description', width: 200},
  {field: 'date', headerName: 'Date', width: 200},
  {
    field: " ",
    headerName: " ",
    width: 200,
    sortable: false,
    renderCell: ({index}) => {  
      return (
        <IconButton     
        size='small'
        color='error'      
        onClick={() => deleteTodo(index)}>
          <Tooltip title="Delete todo">
            <DeleteIcon />
          </Tooltip>
        </IconButton>
      )
      
    }
        
  }
  
]

return (
<div className="App">
  <AppBar position="static">
    <Toolbar>
      <Typography variant="h6">
        Todolist
      </Typography>
     </Toolbar>
   </AppBar>
   <TextField 
    style={{marginRight: 10}}
    variant="standard" 
    label="Description" 
    name="description" 
    value={todo.description} 
    onChange={inputChanged} 
   />
   <TextField 
    variant="standard"
    style={{marginRight: 10}} 
    label="Date" 
    name="date" 
    value={todo.date} 
    onChange={inputChanged}
   />
   <Button 
     style= {{margin: 10}} 
     startIcon={<SaveIcon />}
     color="primary" 
     variant="outlined" 
     onClick={addTodo}>
     Add
   </Button>
   <div style={{ height: 300, width: '40%', margin: 'auto' }}>
     <DataGrid
       rows={todos}
       columns={columns}
       getRowId={row => row.id}
       
      />
    </div>
</div>
);
}

I tried to use different (line 40) render cell parameters, but it doesn't work.

Answer 1

import React, { useState } from 'react';
import './App.css';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
import Tooltip from '@mui/material/Tooltip';
import SaveIcon from '@mui/icons-material/Save';
import { DataGrid, GridColDef } from '@mui/x-data-grid';

export default function App() {
const [todo, setTodo] = useState({description: '', date: ''});
const [todos, setTodos] = useState([]);

const inputChanged = (event) => {
  setTodo({...todo, [event.target.name]: event.target.value});
}

const addTodo = () => {
  const newTodo = {...todo, id: new Date().toString()}
  setTodos([...todos, newTodo]);
  setTodo({description: '', date: ''});
}

const deleteTodo = (row) => {
  setTodos(todos.filter((todo, index) => index !== row.tabIndex));
}

const columns = [
  {field: 'description', headerName: 'Description', width: 200},
  {field: 'date', headerName: 'Date', width: 200},
  {
    field: " ",
    headerName: " ",
    width: 200,
    sortable: false,
    align: "center",
    renderCell: (params) => {
      console.log(params)  
      return (
        <IconButton     
        size='small'
        color='error'      
        onClick={() => deleteTodo(params)}>
          <Tooltip title="Delete todo">
            <DeleteIcon />
          </Tooltip>
        </IconButton>
      )
    } 
  }
]

return (
<div className="App">
  <AppBar position="static">
    <Toolbar>
      <Typography variant="h6">
        Todolist
      </Typography>
     </Toolbar>
   </AppBar>
   <TextField 
    style={{marginRight: 10}}
    variant="standard" 
    label="Description" 
    name="description" 
    value={todo.description} 
    onChange={inputChanged} 
   />
   <TextField 
    variant="standard"
    style={{marginRight: 10}} 
    label="Date" 
    name="date" 
    value={todo.date} 
    onChange={inputChanged}
   />
   <Button 
     style= {{margin: 10}} 
     startIcon={<SaveIcon />}
     color="primary" 
     variant="outlined" 
     onClick={addTodo}>
     Add
   </Button>
   <div style={{ height: 300, width: '40%', margin: 'auto' }}>
     <DataGrid
       rows={todos}
       columns={columns}
       getRowId={row => row.id}       
      />
    </div>
</div>
);
}