Estoy creando una tabla crud usando la interfaz de usuario de React y Materials. Me preguntaba cómo puedo eliminar una fila de una tabla. Estoy obteniendo datos de una API y mostrándolos en una tabla, pero no sé cómo puedo eliminar una fila desde un botón. ¡Este es mi primer proyecto de reacción, lo siento mucho! ¡Gracias!

Parte del código de la tabla de componentes:

 <TableBody> {posts.slice(0,6).map((post) => ( <StyledTableRow key={post.id}> <StyledTableCell component="th" scope="row">{post.title}</StyledTableCell> <StyledTableCell align="center">{post.body}</StyledTableCell> <StyledTableCell align="center"><DialogBoxEdit dataParent1={post.title} dataParent2={post.body} /></StyledTableCell> <StyledTableCell align="center"><Button variant="outlined" color="error" onClick={handleClick}>Delete</Button></StyledTableCell> </StyledTableRow> ))} </TableBody>

Manejar Eliminar:

 const handleClick = (e) => { e.preventDefault(); console.log('The delete was clicked'); }

Importaciones:

 import * as React from 'react'; import { styled } from '@mui/material/styles'; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import TableCell, { tableCellClasses } from '@mui/material/TableCell'; import TableContainer from '@mui/material/TableContainer'; import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import { Button } from '@mui/material'; import './App.css'; import { useEffect, useState } from "react"; import DialogBoxEdit from './DialogBoxEdit';

Obteniendo datos de la API, que se insertan en la tabla:

 const [posts, setPosts] = useState([]) const fetchData = () => { fetch("https://jsonplaceholder.typicode.com/posts").then(response => { return response.json() }) .then(data => { setPosts(data) }) } useEffect(() => { fetchData() }, [])