how to delete a row from the table with a button on react?

Question

I wanted to remove a row from the table with the function 'deleteRow(btn)' when pressing the button, but I get this error 'Cannot read properties of undefined (reading 'parentNode')'. What could I add or correct to successively drop a row from a table?

App.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>          
        )
    }
}

Answer 1

In React, you generally want to try avoiding direct DOM manipulation, since this takes state management out of React, which is something you want to avoid.

Therefore, instead of trying to delete each row directly using DOM functions like remove or removeChild, it would be best to keep all of the table rows in a key in the state object. Then, you can filter out the deleted row by filtering it out by index or through some other identifier. Here's an example:

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>
    )
  }
}

Answer 2

You should not be manipulating the DOM as this is an anti-pattern in React, instead you should update the state you are rendering from.

Delete by idFoto.

deleteRow = (idFoto)=> {
  this.setState(prevState => ({
    fotos: prevState.fotos.filter(el => el.idFoto !== idFoto
  }))
}

In the child pass the id to the delete handler.

<button className="btn btn-outline-danger" 
  onClick={() => props.restauranteAremover(row.idFoto)}>
  Delete restaurante
</button>