Using Filter Method to Remove Item from Array

Question

I am new to React and I am trying to build a very basic timesheet tool, where users can add tasks into the application and save. I am using React as well as Typescript.

So far I have my main component that includes an empty array of tasks and the table. Then inside the table body I have mapped to pull the table rows and a separate component that includes the tags.

I am trying to add in a button to delete tasks using the filter method on the array to remove the index for the individual item, however nothing happens when I click, or I get an undefined error. Can someone please help? I am using the delete button and handle delete function below to achieve this

Main Component

import * as React from 'react';
import { ITimesheetToolProps } from './ITimesheetToolProps';
import { escape } from '@microsoft/sp-lodash-subset';
import TableRow from './TableRow';
import styles from './TimesheetTool.module.scss';

export default class TimesheetTool extends React.Component<ITimesheetToolProps, any> {
  state = {
    tasks: []
  }

  addTask = (task) => {
    const tasks = [...this.state.tasks];
    this.setState({tasks: this.state.tasks.concat(task)});
  }

  handleDelete = (index) => {
    const tasks = this.state.tasks.filter(t => t.index !== index);
    this.setState({ tasks });
  }

  public render(): React.ReactElement<ITimesheetToolProps, any> {
    return (
      <div>
        <button onClick={(task) => this.addTask(task)}>Add Task</button>
        <table>
          <thead className={styles.tbody}>
            <tr>
              <th>Project</th>
              <th>Task</th>
              <th>Monday</th>
              <th>Tuesday</th>
              <th>Wednesday</th>
              <th>Thursday</th>
              <th>Friday</th>
              <th>Saaturday</th>
              <th>Sunday</th>
            </tr>
          </thead>
          <tbody className={styles.tbody}>
            {this.state.tasks.map((task, index) => <tr key={index}><TableRow /><td><button onClick={() => this.handleDelete(index)}>Delete</button></td></tr>)}
          </tbody>
        </table>
      </div>
    );
  }
}

Shanon Jackson · Accepted Answer · 2019-10-20 04:50:41Z

1

Its hard to help without knowing the shape of the data, but i think this is what you're looking for, help me know if this helps

const tasks = this.state.tasks.filter((_, i) => i !== index);

The code works, why it is removing the last item in the array i don't know, you'll have to

//change <button onClick..../>
// to this.
<button onClick={handleDelete(index)}/>

//change handleDelete to this..
const handleDelete = (index) => () => this.setState({tasks: this.state.tasks.filter((_, i) => i !== index)

edited Oct 20, 2019 at 4:50

answered Oct 20, 2019 at 3:22

Shanon Jackson

6,6611 gold badge26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ellis1987 Over a year ago

Thanks! This helped and it is now removing items, but it is removing the last item from the array. I want to remove the item that is clicked. Could you also explain what this is doing inside the filter method? ie what is the underscore for? Also, what do you mean by 'shape of the data?

Shanon Jackson Over a year ago

filter is a "higher order function" which means it takes another function is a parameter. The function you pass as a parameter is run over every item, if the function returns true it keeps the item; if it returns false it removes the item.

Ellis1987 Over a year ago

Unfortunately this is still just deleting the last item

user12245049 · Accepted Answer · 2019-10-20 05:06:42Z

0

Use Splice.

 handleDelete = (index) => { 
    this.setState({ tasks: this.state.tasks.splice(index,1);
 });
  }

answered Oct 20, 2019 at 5:06

user12245049

1 Comment

Ellis1987 Over a year ago

Thanks for the response, but this just deletes all items apart from the first one

Collectives™ on Stack Overflow

Using Filter Method to Remove Item from Array

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related