CODEWITHSUNDEEP
reactjsreduxreact-table
Makayla Clausen
Makayla Clausen

Reputation: 21

deleting data from react-table

I am using react-table.js to take data from a form, but I want to be able to delete the data out of the table. The button is working so I know that is attached properly, but I can't seem to get it to delete. Here is the code 

    handleDelete = item => {
    var newArr = [];
    const newState = this.props.documentation;
    for (var key in newState) {
      if (newState.hasOwnProperty(key)) {
        let data = newState[key];
        data.id = key;
        newArr.push(newState[key]);
      }
      const sliceArr = newArr.slice();
      if (sliceArr.indexOf(item) > -1) {
        sliceArr.slice(sliceArr.indexOf(item), 1);
      }
      console.log('New Array', sliceArr);
      this.setState({ data: sliceArr });
    }
  };

Along with the button I am attaching it to

Cell: row => (
          <div>
            <button onClick={() => this.handleDelete(row.id)}>Delete</button>
          </div>

Upvotes: 2

Views: 2568

Answers (1)

Will
Will

Reputation: 7057

You're looking for splice rather than slice:

  const spliceArr = newArr.slice();
  if (spliceArr.indexOf(item) > -1) {
    spliceArr.splice(spliceArr.indexOf(item), 1);
  }
  console.log('New Array', spliceArr);
  this.setState({ data: spliceArr });

Example:

const newArr = [1, 2, 3, 4]
// [1, 2, 3, 4] example
const spliceArr = newArr.slice()
// [1, 2, 3, 4] ok
spliceArr.slice(spliceArr.indexOf(3), 1)
spliceArr
// [1, 2, 3, 4] oops
spliceArr.splice(spliceArr.indexOf(3), 1)
spliceArr
// [1, 2, 4]    better

If that doesn't get you all the way there, you may want to update your question with the rendering (presumably JSX) of the table itself, as @MichaelBenin suggested.

Upvotes: 1

Related Questions