Can't figure out how to remove elements from array

JavaScript
1

I have created the To Do List App with React. Everything worked but I wanted to make that, when the checkboxes are checked that element should be removed from a list array.

The structure of my web-app
  • There is an input which you can type in string.
  • There is a button and when you clicked it, check if the input is not a string with spaces or empty string and if the string is not those than push it to the component’s state.list array.
  • There is a constant list which is declared in render method and it map the component’s state.list array and make checkboxes for each string.

Here, the link: https://codepen.io/AndrewAung11/pen/JjEeEQj

Thank you!

2

could you put it up on a code pen or replit?

3

@caryaharper Sorry I added the link like this [To Do List App](https://codepen.io/AndrewAung11/pen/JjEeEQj) I edit the post and added the link on anther line!

1 Like
4

I made an onDelete handler to be used onChange for your checkbox inside your map function and I have the onChange have an anon function callback that calls the onDelete which I hand the id provided by the map and use to delete the the right items

5

@caryaharper Sorry :sweat_smile:, What do you mean?

7 
//this does the work of actually doing the deleting
handleDelete(index) {
    this.setState((state)=>({
      
      list: [...state.list.slice(0, index), ...state.list.slice(index + 1)]
    }))
  }

//this is mostly what you've written, but with the added onChange
{this.state.list.map((text, id)=><div className="td-li" key={id}><input type="checkbox" onChange={() => this.handleDelete(id)}/>{text}</div>)}
8

@caryaharper @camperextraordinaire Thanks!

It worked perfectly as I expected!

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.