How To Delete Row From Dynamic React JS Table (on button click) #reactjs #coding #frontend

(We're free online community, meet other makers!)

#react #reactjs #coding #webdev #webdevelopment #programming

In this follow up to my previous React tutorial, I'll show you how to use array filter method to dynamically delete items from an array of table rows.

Keywords:
How to create dynamic table in react js

Video Chapters:
00:00 How to delete a row dynamically from a custom table in React
00:26 Quick review of react table from previous tutorial
00:58 Create delete row function
01:46 Create a copy of table rows array using rest / spread operator
02:22 Use filter method on copy of table rows (to remove clicked row)
02:33 Create filter condition (item index does not equal index of clicked row)
04:05 Add delete button in 3rd column of the table
04:47 Pass delete row function as props to Table component
05:10 Pass delete row function into the Row component
05:24 Adding onClick event to the delete row button
05:52 Passing index of the clicked row into delete Row function in Row component from array map method inside Table component
06:54 Testing the delete

[codewriter]

That solution seems to be O(n), which is not the most efficient. If there was a way to store the state of the ID in each row where an onClick could fetch it, then that would make this algorithm much more efficient running at O(1).

[codie]

Do you have any plans to build a advance table component for react typescript would love a video about it