Quería eliminar una fila de la tabla con la función 'deleteRow(btn)' al presionar el botón, pero aparece este error 'No se pueden leer las propiedades de undefined (leyendo 'parentNode')'. ¿Qué podría agregar o corregir para eliminar sucesivamente una fila de una tabla?
Aplicación.js
class App extends React.Component{ constructor(props) { super(props); this.state = { fotos: [], restaurantes:[], } } deleteRow=(btn)=> { var row = btn.parentNode.parentNode; row.parentNode.removeChild(row); } render(){ const { fotos, restaurantes } = this.state; <div className="container"> <Tabela dadosFotos={fotos} restaurante={this.deleteRow} /> </div> }Tabela.js
import React from "react"; const CorpoTabela = (props) => { const rows = props.dadosDasFotos.map((row) => { return( <tr key={row.idFoto}> <td>{row.nomeRestaurante}</td> <td> <button className="btn btn-outline-danger" onClick={()=>props.restauranteAremover(row.idFoto)}> Delete restaurante </button> </td> </tr> ) }) return(<tbody>{rows}</tbody>) } class Tabela extends React.Component{ render(){ const { dadosFotos, restaurante }=this.props return( <table className="table table-striped"> <CorpoTabela dadosDasFotos={dadosFotos} restauranteAremover={restaurante}/> </table> ) } }No debe manipular el DOM ya que este es un antipatrón en React, sino que debe actualizar el estado desde el que está renderizando.
Eliminar por idFoto .
deleteRow = (idFoto)=> { this.setState(prevState => ({ fotos: prevState.fotos.filter(el => el.idFoto !== idFoto })) }En el elemento secundario, pase la identificación al controlador de eliminación.
<button className="btn btn-outline-danger" onClick={() => props.restauranteAremover(row.idFoto)}> Delete restaurante </button>En React, generalmente desea intentar evitar la manipulación directa de DOM, ya que esto elimina la gestión de estado de React, que es algo que desea evitar.
Por lo tanto, en lugar de intentar eliminar cada fila directamente usando funciones DOM como remove o removeChild , sería mejor mantener todas las filas de la tabla en una clave en el objeto de estado. Luego, puede filtrar la fila eliminada filtrándola por índice o mediante algún otro identificador. Aquí hay un ejemplo:
import { Component } from 'react' import './styles.css' export default class App extends Component { state = { rows: [ { id: 1, col1: 'A', col2: 'some text' }, { id: 2, col1: 'B', col2: 'some text' } ] } spliceRow = (index) => { this.state.rows.splice(index, 1) this.setState({ rows: this.state.rows }) } filterRows = (id) => { this.setState({ rows: this.state.rows.filter((row) => { return row.id !== id }) }) } render() { return ( <table className="App"> <tbody> {this.state.rows.map((row, index) => { return ( <tr key={row.id}> <td>{row.col1}</td> <td>{row.col2}</td> <td> <button onClick={() => this.spliceRow(index)}> Remove row with splice </button> </td> <td> <button onClick={() => this.filterRows(row.id)}> Remove row with filter </button> </td> </tr> ) })} </tbody> </table> ) } }