Adding _delete note_ functionality to iNotebook _ Complete React Course in Hindi #64
141 views
Feb 11, 2024
In the 64th episode of the "Complete React Course in Hindi," the tutorial focuses on enriching the iNotebook project by implementing the "delete note" functionality. This video provides a step-by-step guide on incorporating the ability to delete individual notes within the iNotebook application. The instructor demonstrates how to handle delete requests, update the application state accordingly, and ensure a seamless user experience. Whether you're a React developer looking to expand your skills in CRUD operations or a learner interested in building comprehensive features for a React project, this tutorial offers practical insights into adding the "delete note" functionality to the iNotebook application.
View Video Transcript
0:00
рддреЛ рд╕реЛ рдлрд╛рд░ рд╣рдо рд▓реЛрдЧреЛрдВ рдиреЗ рджреЗрдЦрд╛ рдХрд┐рд╕ рддрд░рд╣ рд╕реЗ рд╣рдо рд▓реЛрдЧ рдПрдХ note рдХреЛ add рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рд╣рдорд╛рд░рд╛ рдпрд╣ рдЬреЛ add note рд╡рд╛рд▓рд╛ рдмрдЯрди рд╣реИ рд╡реЛ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣я┐╜я┐╜
0:06
рдЕрднреА рдПрдХ рдЪреАрдЬ рдпрд╣рд╛рдБ рдкрд░ рдЬреЛ рдореИрдВ рдХрд░рдирд╛ рдЪрд╛рд╣реВрдБрдЧрд╛ рд╡реЛ рдпрд╣ рд╣реИ рдХрд┐ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ рдЬреЛ рдореЗрд░рд╛ submit рд╣реИ рдЗрд╕рдореЗрдВ submit рдирд╛ рдХрд╣рдХрд░ рдЗрд╕рдХя┐╜я┐╜
0:14
рдореИрдВ add note рдХрд░реВрдБрдЧрд╛ рдареАрдХ рд╣реИ рддреЛ рдереЛрдбрд╝рд╛ рд╕рд╛ рдЕрдЪреНрдЫрд╛ рд▓рдЧреЗрдЧрд╛ рдереЛрдбрд╝рд╛ рдХрд╣реАрдВ рдирд╛ рдХрд╣реАрдВ рд▓рдЧреЗрдЧрд╛ рдХрд┐ рд╣рд╛рдБ рдпрд╛рд░ note рд╣рдорд╛рд░рд╛ add рд╣реЛ рд░рд╣рд╛ рд╣реИ рдареАрдХ рд╣я┐╜я┐╜
0:20
рдЙрд╕реА рдХреЗ рд╕рд╛рде рд╕рд╛рде рдореИрдВ рдПрдХ рдЪреАрдЬ рдФрд░ рдХрд░реВрдБрдЧрд╛ рдХрд┐ рдпрд╣рд╛рдБ рдкрд░ рдореИрдВ delete note рд╡рд╛рд▓реЗ function рдХреЛ рдЗрд╕ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ complete рдХрд░реВрдБрдЧя┐╜я┐╜
0:27
рддреЛ рдореИрдВ рдХрдм delete рдХрд░реВрдБрдЧрд╛ note рдХреЛ рдореИрдВ delete рддрдм рдХрд░реВрдБрдЧрд╛ note рдХя┐╜я┐╜
0:32
рдЬрдм рдХреЛрдИ рднреА рдЗрдирд╕рд╛рди рдЗрд╕ рдкрд░ click рдХрд░реЗрдЧрд╛ рдпрд╣ рдЬреЛ рдореЗрд░рд╛ delete рд╡рд╛рд▓рд╛ icon рдЗрд╕ рдкрд░ click рдХрд░реЗрдЧя┐╜я┐╜
0:37
рддрдм рдореИрдВ рдХреНрдпрд╛ рдХрд░реВрдБрдЧрд╛ рдПрдХ note рдХреЛ delete рдХрд░реВрдБрдЧрд╛ рддреЛ рд╣рдо рд▓реЛрдЧ рдпрд╣рд╛рдБ рдкрд░ рдЬрд▓реНрджреА рд╕реЗ рдХреНрдпрд╛ рдХрд░рддреЗ рд╣реИя┐╜я┐╜
0:41
рдХрд┐ рдЬрд╣рд╛рдБ рдкрд░ рдореЗрд░рд╛ рдпрд╣ particular icon рд╣реИ delete рд╡рд╛рд▓рд╛ рдпрд╣рд╛рдБ рдЧрдпрд╛ рдпрд╣ рд╡рд╛рд▓рд╛ рдЖрдЗрдХрди рдпрд╣ рд░рд╣рд╛ рдореЗрд░рд╛ рдпрд╣ рдбрд┐рд▓реАрдЯ рд╡рд╛рд▓рд╛ рдЖрдЗрдХрди рдореИрдВ рдЗрд╕рдореЗрдВ рдПрдХ рдСрди рдХреНрд▓рд┐рдХ рд▓рд┐рд╕реНрдирд░ рдЖрдбрд╝ рдХрд░реВрдВрдЧрд╛ рдФрд░ рдореИрдВ рдХрд╣реВрдВрдЧрд╛ рдХрд┐ рдЬреИрд╕реЗ рдХреЛ рдЗрд╕ рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░реЗрдВ рдпрд╣ рдиреЛрдЯ рдбрд┐рд▓реАрдЯ рд╣реЛ рдЬрд╛рдП рдФрд░ рдбреЗрдлрд┐рдирд┐рдЯрд▓реА рдореБрдЭреЗ рдЕрдкрдиреЗ рдХреЙрдВрдЯреЗрдХреНрд╕ рдХреЛ рд▓реЗрдХрд░ рдЖрдирд╛ рдкрдбрд╝реЗрдЧрд╛ рдпрд╣рд╛рдБ рдкя┐╜я┐╜
1:15
рдмрд╛рдд рдпрд╣ рд╣реИ рдХрд┐ рдЬреЛ рдЪреАрдЬ рдЖрдкрдХреЛ рдЪрд╛рд╣рд┐рдП рдЕрдкрдиреЗ рдХреЙрдиреНрдЯреЗрдХреНрд╕ рд╕реЗ рдЙрд╕рдХреЛ рд▓реЗрдХрд░ рдЖрдУ рдФрд░ рдЙрд╕рдХреЛ рдпреВрдЬ рдХрд░реЛ рддреЛ рдпрд╣рд╛рдВ рдкрд░ рдбя┐╜я┐╜
1:22
рд╕реНрдЯреНрд░реЙрдХреНрдЪрд░рд┐рдВрдЧ рдХрд░рддрд╛ рд╣реВрдВ рдореИрдВ рдХреЙрдиреНрдЯреЗрдХреНрд╕ рдореИрдВ рд╕реЗ рд▓реЗрдХрд░ рдЖрддрд╛ рд╣реВрдВ рдбрд┐рд▓реАрдЯ рдиреЛрдЯ рдареАрдХ рд╣реИ рддреЛ рдбрд┐рд▓реАрдЯ рдиреЛрдЯ рдХреЛ рд▓реЗрдХя┐╜я┐╜
1:28
delete trash on click is equal to arrow function arguments delete note delete note particular note ID
1:47
рддреЛ рдЗрд╕ particular note рдХреА ID рдХреНрдпрд╛ рд╣реЛрдЧреА? note. underscore ID, рддреЛ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ note. underscore ID рд▓рд┐рдЦ рджреВрдБрдЧрд╛, рдареАрдХ рд╣реИ
1:53
рдФрд░ рдореИрдВ рдХреНрдпрд╛ рдХрд░реВрдБрдЧрд╛ рдЬреИрд╕реЗ рдХреЛрдИ рдЗрдВрд╕рд╛рди рдбрд┐рд▓реАрдЯ рдХрд░реЗрдЧрд╛ note рдХреЛ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ рдЬреЛ рдореЗрд░рд╛ context рд╣реИ рдпрд╛ рдирд╣реАрдВ рдХрд┐ note state.js рд╣я┐╜я┐╜
2:01
рдЗрд╕рдХреЗ рдЕрдВрджрд░ рдореИрдВ delete note function рдХреЛ finish рдХрд░рддрд╛ рд╣реВрдБ рдареАрдХ рд╣я┐╜я┐╜
2:05
рддреЛ рдЕрднреА рдХреЗ рд▓рд┐рдП рдореИрдВ рдХрд╛рдо рдХрд░рддрд╛ рд╣реВрдБ рдореИрдВ рдЖрдкрд░ рдПрдХ console.log рд▓рдЧрд╛рддрд╛ рд╣реВя┐╜я┐╜
2:09
рдФрд░ deleting the note with id рдпрд╣рд╛рдБ рдкрд░ рд▓рд┐рдЦ рджреЗрддрд╛ рд╣реВрдБ рдФрд░ рдпрд╣рд╛рдБ рдкрд░ plus ID рдореЗрдВ рд▓рд┐рдЦ рджреВрдВрдЧрд╛ рдареАрдХ рд╣реИ рдФрд░ рдЕрднреА рдпрд╣рд╛рдБ рдкрд░ рдореИрдВ рджреЗрдЦрддрд╛ рд╣реВрдВ рдХрд┐ рдХреНрдпрд╛ рдЗрддрдирд╛ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИ рдХрд┐ рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣я┐╜я┐╜
2:20
рдпрд╣ рдХрд╣ рд░рд╣рд╛ рд╣реИ use context is not defined рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ import рдХрд░ рд░рд╣рд╛ рд╣реВрдВ use context рдХреЛ ok рддреЛ use context is not defined
2:29
рдпрд╛рд░ use context рдЬреЛ рд╣реИ рдирд╛ automatically import рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ рдЬрдм рд╣рдо use context enter рд▓рд┐рдЦрддреЗ рд╣реИя┐╜я┐╜
2:33
рд▓реЗрдХрд┐рди рдХреНрдпреЛрдВрдХрд┐ рдореИрдВрдиреЗ copy рдХрд┐рдпрд╛ рд╡рд╣рд╛рдБ рд╕реЗ рдЗрд╕рд▓рд┐рдП рд░реЛрдбреА рд╕реА рджрд┐рдХреНрдХрдд рдЖрдИ reload рдХрд░реВрдБрдЧрд╛ рдЗрд╕рдХреЛ рдФрд░ рджреЗрдЦрддрд╛ рд╣реВрдБ рдХреЛрдИ error рдлреЗрд░рд░ рддреЛ рдирд╣реАрдВ рдЖ рд░рд╣рд╛ рд╣я┐╜я┐╜
2:39
рд╡рд╣рд╛рдБ рдкрд░ рдХрд╣рддрд╛ рд╣реИ use context is defined but never used about.js рдореЗя┐╜я┐╜
2:43
about.js рдХреЗ рдЕрдВрджрд░ рд╕реЗ use effect рдФрд░ use context рджреЛрдиреЛрдВ рд╣рдЯрд╛рдУ рдареАрдХ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ use рд╣реА рдирд╣реАрдВ рд╣реЛ рд░рд╣рд╛ рд╣реИ рдареАрдХ рд╣я┐╜я┐╜
2:49
control s рдХрд░рд╛ рдФрд░ рдпрд╣рд╛рдБ рдкрд░ рдЖрдк рд▓реЛрдЧ рджреЗрдЦреЛ рдЕрднреА reload рдХрд░реВрдБрдЧрд╛ рддя┐╜я┐╜
2:52
рдПрдХрджрдо clean рд╣реИ рд╣рдорд╛рд░рд╛ console рд╣рд╛рдБ рдПрдХ рдЪреАрдЬ рдФрд░ рдореБрдЭреЗ рдпрд╣рд╛рдБ рдкрд░ рдкрд░рд┐рд╢рд╛рди рдХрд░ рд░рд╣реА рд╣я┐╜я┐╜
2:57
рдХрд┐ рдпрд╣ рдЬреЛ рдореЗрд░рд╛ home.js рд╣реИ рд╢рд╛рдпрдж рдореИрдВ рд╣реИ рд╣реЛрдо рдбреЛрдЯ рдЬреАрд╡рди рдиреЗ рд╡рд╛рдЯреНрдЯ рдЬреАрд╡рди рдиреЛрдЯ рд░реЙрдХ рд╡рд╣рд╛рдВ рдкрд░ рдПрдХ рдХрдВрд╕реЛрд▓ рд▓реЙрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдореИрдВ рдХрд┐рд╕реА рд╕реБрдмрд╣ рд▓реЙрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВя┐╜я┐╜
3:08
рд▓реЛрдХреЗрд╢рди рдкрд╛рд╕ рдиреЗ рдЗрдирдХреЛ рдФрд░ рдореИрдВ рдпрд╣ рдирд╣реАрдВ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдпрд╣ рдкрд░ рдпрд╣ рдпреВрдЬ рдПрдлреЗрдХреНрдЯ рдирд╣реАрдВ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдорддрд▓рдм рдореБрдЭреЗ рдирд╣реАрдВ рдЪрд╛рд╣рд┐я┐╜я┐╜
3:14
react router dom package
3:28
nav bar рдореЗрдВ use effect is defined but not used nav bar рдореЗрдВ рдУрдХреЗ рддреЛ рдЕрднреА use effect use рдирд╣реАрдВ рд╣реЛ рд░рд╣рд╛ рд╣я┐╜я┐╜
3:33
рд▓рд╛рдЗрди рдХрд░ рджрд┐рдпрд╛ рддреЛ рдХрд╛рдлреА рдХреНрд▓реАрди рдЕрдк рдХрд░рдирд╛ рдкрдбрд╝рддрд╛ рд╣реИ рдФрд░ рдХреЛрдИ рджрд┐рдХреНрдХрдд рдирд╣реАрдВ рд╣реИ рдХрд┐ рдЖрдкрдХреЛ рдХрд░рдирд╛ рдкрдбрд╝ рд░рд╣рд╛ рд╣реИ рдЖрдк рдЬрдм рдЕрдкрдиреА рдЖрдкреНрд▓реАрдХреЗрд╢рди рдмрдирд╛ рд░рд╣реЗ рд╣реЛ рддреЛ рдбреЗрдлрд┐рдиреЗрдЯрд▓реА рдХреНрд▓реАрди рдЕрдк рдХрд░реЛрдЧреЗ рдЕрдм рдореИрдВ рдЖрдкрдХреЛ рдЗрд╕ рдбрд┐рд▓реАрдЯ рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░реВрдБрдЧрд╛ рджреЗрдЦреЛ рдпрд╣ рдХрд╣ рд░рд╣рд╛ рд╣реИ рдбрд┐рд▓реАрдЯрд┐рдВрдЧ я┐╜я┐╜
4:03
рдЬреЛ рдореЗрд░реЗ notes рд╣реИрдВ, рдореИрдВ рдЙрдирдХреЛ change рдХрд░ рджреВрдБрдЧрд╛, рдареАрдХ рд╣реИ, рдФрд░ рдЬреЛ рдореЗрд░реЗ notes рд╣реЛрдиреЗ рд╡рд╛рд▓реЗ рд╣реИрдВ, рдореИрдВ рдЙрдирдореЗрдВ рд╕реЗ delete рдХрд░ рджреВрдБрдЧрд╛ рдпрд╣ рд╡рд╛рд▓рд╛ note, note with this id
4:14
рддреЛ рдореИрдВ рдХреНрдпрд╛ рдХрд░реВрдБрдЧрд╛ рдпрд╣рд╛рдБ рдкрд░ рдореИрдВ рд▓рд┐рдЦреВрдБрдЧрд╛ new notes is equal to notes.filter рдФрд░ filter рдХреНрдпрд╛ рд▓реЗрддрд╛ рд╣реИ рдПрдХ arrow function рдФрд░ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ рд▓рд┐рдЦреВрдБрдЧрд╛ note рдФрд░ рдореИрдВ рдХрд╣реВрдБрдЧрд╛ рдХрд┐ note.id is not equal to id рдареАрдХ рд╣реИ рдпрд╣ рдЪреАрдЬ рдпрд╣рд╛рдБ рдкрд░ note.underscore id sorry note.underscore id is not equal to id рдпрд╣рд╛рдБ рдкрд░ рдпрд╣ underscore id рд╣я┐╜я┐╜
4:39
рддреЛ рдЕрдЧрд░ note.underscore id рдирд╣реАрдВ рд╣реИ рдмрд░рд╛рдмрд░ id рдХреЗ рддрдм рдХреНрдпрд╛ рд╣реЛрдЧрд╛ notes рдХреЗ рдЕрдВрджрд░ рд╡реЛ рд░рд╣реЗрдЧрд╛ рд╡рд░рдирд╛ рдирд╣реАрдВ рд░рд╣реЗрдЧя┐╜я┐╜
4:45
рдареАрдХ рд╣реИ рддреЛ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ const рдХрд░реВрдБрдЧрд╛ рдФрд░ рдпрд╣рд╛рдБ рдкрд░ new notes set note new notes рдХрд░ рджреВрдБрдЧя┐╜я┐╜
4:52
рддреЛ рдЕрдм рдореИрдВ expected an assignment of function call instead saw an expression return return node is not equal to id delete first please wake up early delete
5:09
рдЕрдм рдпрд╣рд╛рдБ рдкрд░ add note рдХрд░рдиреЗ рдкрд░ рдпрд╣ error рдЗрд╕рд▓рд┐рдП рдЖ рд░рд╣рд╛ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдиреЛрдЯ рдЬреЛ рд╣реИ рд╡рд╣ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИ рдкрд░ рдПрдХ рдЪреАрдЬ рдпрд╣рд╛рдВ рдкрд░ рдЕрднреА рднреА рдорд┐рд╢рд┐рдВрдЧ рд╣реИ рдЬреЛ рдХрд┐ рдореЗрд░реЗ рдЖрдЬ рдиреЛрдЯ рдореЗрдВ рднреА рдорд┐рд╢рд┐рдВрдЧ рдереА рдбрд┐рд▓реАя┐╜я┐╜
5:34
рдиреЛрдЯ рдХреЗ рдЕрдВрджрд░ рднреА рдорд┐рд╢рд┐рдВрдЧ рд╣реИ рдФрд░ рд╡рд╣ рдПрдкреАрдЖрдИ рдХреЙрд▓ рдХрд┐ рдЖрдк рдмреИрдХ рдПрдВрдб рдХреЗ рдЕрдВрджрд░ рднреА рдиреЛрдЯ рдХреЛ рдбрд┐рд▓реАрдЯ рдХрд░реЗрдВ рдРрд╕рд╛ рдирд╣реАрдВ рдХрд┐ рдЖя┐╜я┐╜
5:39
рдпрд╛ frontend frontend рдореЗрдВ note рдХреЛ delete рдХрд░рдХреЗ update рдХрд░рдиреЗ рд╣реИрдВ рдЖрдкрдХреЛ back end рдореЗрдВ рдЬрд╛рдХрд░ рднреА рдЙрд╕рдХреЛ delete рдХрд░рдирд╛ рдкрдбрд╝реЗрдЧрд╛ рдареАрдХ рд╣я┐╜я┐╜
5:46
рддреЛ рдпрд╣ рдЪреАрдЬ рднреА рдЖрдкрд░ рдХрд░рдиреА рд╣реИ рд╣рдо рд▓реЛрдЧ рдХреЛ рддреЛ add note рд╣реЛ рдЧрдпрд╛, delete note рд╣реЛ рдЧрдпя┐╜я┐╜
5:50
edit note рднреА definitely рд╣рдо рд▓реЛрдЧ рджреЗрдЦреЗрдВрдЧреЗ рдХрд┐ edit рдХрд┐рд╕ рддрд░рд╣ рд╕реЗ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣я┐╜я┐╜
5:54
existing note рддреЛ edit рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╣рдореЗрдВ рдХреНрдпрд╛ рдХрд░рдирд╛ рдкрдбрд╝реЗрдЧрд╛ рдПрдХ ID рдЪрд╛рд╣рд┐рдП рд╣реЛрдЧреА рдареАрдХ рд╣реИ ID рдХреЗ рд╕рд╛рде рд╕рд╛рде рд╣рдо рд▓реЛрдЧреЛрдВ рдХреЛ title рдФрд░ description рднреА рдЪрд╛рд╣рд┐рдП рд╣реЛрдЧрд╛ рдФрд░ tag рднреА рдЪрд╛рд╣рд┐рдП рд╣реЛрдЧрд╛ рдареАрдХ рд╣я┐╜я┐╜
6:05
рддреЛ рд╣рдо рд▓реЛрдЧ рдХреНрдпрд╛ рдХрд░реЗрдВрдЧреЗ рдЖрдиреЗ рд╡рд╛рд▓реЗ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рджреЗрдЦреЗрдВрдЧреЗ рдХрд┐рд╕ рддрд░рд╣ рд╕я┐╜я┐╜
6:09
рдПрдХ note рдХреЛ edit рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ рдФрд░ рдЙрд╕реА рдХреЗ рд╕рд╛рде рд╕рд╛рде рдЗрди future рд╡реАрдбрд┐рдпреЛ рд╣рдо рд▓реЛя┐╜я┐╜
6:13
рдпреЗ network call рд▓рдЧрд╛ рдХрд░ рднреА add note рдФрд░ delete note рдХреЛ finish рдХрд░реЗрдВрдЧя┐╜я┐╜
6:17
so рдЕрдореА рдХреЗ рд▓рд┐рдП рдЗрд╕ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рдЗрддрдирд╛ рд╣реИ рдЧрдП рдЗрд╕ playlist access рдЬрд░реВрд░ рдХрд░ рд▓реЗрдия┐╜я┐╜
6:21
thank you so much guys for watching this video and I will see you next time