Delete row on remove click React

Question

I have following code where i am adding dynamic row and column. I want to delete row which on click.

But, getting difficulty figure it out.

class TableCells extends Component {

  onDeleteEvent = event => {
    // Delete row 
  };

  render() {

      var numberOfRow = this.props.numberOfRow; // user input
      var numberOfColumn = this.props.numberOfColumn; // user input

      var rows = Array.from({length: numberOfRow}).map((_, rowIdx) => (

        <tr key={rowIdx}>{
          Array.from({length: numberOfColumn}).map((_, colIdx) => (
            <EditableCell key={colIdx}/>
          ))
        }

        <td>
          <input type="button" onClick={this.onDeleteEvent} value="X" />
        </td>
        </tr>
      ))

      return (<tbody>{rows}</tbody>);
  }
}

Any help would be greatly appreciated.

Answer 1

Check this sandbox. A little simplified, but works for you. https://codesandbox.io/s/9l9wnonyp

Basically, move your object in the state, and when you delete the item send his ID as parameter, and just set the new state, and it will rerender.

<input
   type="button"
   onClick={() => this.onDeleteEvent(rowIdx)}
   value="X"
/>

And onDeleteFunction:

onDeleteEvent = id => {
    // Delete row
    let rows = this.state.rows;
    rows.splice(id, 1);

    this.setState({
      rows
    });
  };

For any other question just comment here, and I will help you :)

Answer 2

The right way to do this would be to:

class TableCells extends Component {

  render() {
      const onDeleteEvent = (id) => () => this.props.onDeleteEvent(id);
      var numberOfRow = this.props.numberOfRow; // user input
      var numberOfColumn = this.props.numberOfColumn; // user input

      var rows = Array.from({length: numberOfRow}).map((_, rowIdx) => (

        <tr key={rowIdx}>{
          Array.from({length: numberOfColumn}).map((_, colIdx) => (
            <EditableCell key={colIdx}/>
          ))
        }

        <td>
          <input type="button" onClick={onDeleteEvent(colIdx)} value="X" />
        </td>
        </tr>
      ))

      return (<tbody>{rows}</tbody>);
  }
}

And wherever you use TableCellsand presumably store the number of rows you are passing as a prop to TableCells, you would have a function that reduces the number of rows passed, thus affecting the numberOfRow prop.

I'm guessing you are using TableCells something like this:

<TableCells numberOfRow={this.state.numberOfRow} numberOfColumn={this.state.numberOfColumn} />

You should change it like this:

<TableCells
    numberOfRow={this.state.numberOfRow} 
    numberOfColumn={this.state.numberOfColumn} 
    onDeleteEvent={(idOfColumnToDelete) => {//Modify state here...})}
/>

Answer 3

You can try this one

class TableCells extends Component {
  state = {
    numRows = this.props.numberOfRow  // I know it is considered as an antipattern :) But in this case that's ok!!!
  }

  onDeleteEvent = () => {
    // also you should add the check if it's not zero :)
    this.setState({ numRows: this.state.numRows - 1 });
  };

  render() {

      const { numberOfColumn } = this.props; // user input
      const { numRows } = this.state;

      const rows = Array.from({length: numRows }).map((_, rowIdx) => (

        <tr key={rowIdx}>
          {
            Array.from({length: numberOfColumn}).map((_, colIdx) => (
              <EditableCell key={colIdx}/>
            ))
          }

          <td>
            <input type="button" onClick={this.onDeleteEvent} value="X" />
          </td>
        </tr>
      ));

      return (<tbody>{rows}</tbody>);
  }
}

Answer 4

  class TableCells extends Component {
    constructor () {
    super()
    this.state = {
      numberOfRow: Array.from({length: this.props.numberOfRow}),
      numberOfColumn: Array.from({length: this.props.numberOfColumn})
    }
  }
  onDeleteEvent (index) {
    this.state.numberOfRow.splice(index, 1)
  };

  render () {
    var rows = this.state.numberOfRow.map((elem, index) => (<tr>
      {this.state.numberOfColumn.map((_, colIdx) => {<EditableCell key={colIdx}/>})}
      <td>
        <input type='button' onClick={() => this.onDeleteEvent(index)} value='X' />
      </td>
    </tr>))
    return (
      <tbody>{rows}</tbody>
    )
  }
}