How To Delete Row From Dynamic React JS Table (on button click)
Sign Up 👻👻👉 https://semicolon.dev/YouTube
(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
On this page of the site you can watch the video online How To Delete Row From Dynamic React JS Table (on button click) with a duration of hours minute second in good quality, which was uploaded by the user Ghost Telepathy 10 October 2022, share the link with friends and acquaintances, this video has already been watched 7,579 times on youtube and it was liked by 46 viewers. Enjoy your viewing!
