CRUD Operations Insert, Update and Delete in React Js || Map the Inserted Value in React js

hello in this video we are going to secret operations like insert update delete in react i already created a react project here this is js file okay and this is css and here i initially created a text line center so i want all content in center okay and let's start i'm going to create one input field and for i get value and i close that and then so i'm going to create a button to add the value and save this i get the input field and add button and i'm going to change the style of my input field its height is 35 px and also with this 20 percentage yeah this is good also i'm going to change the button style sorry button height and width height is 40 px and also width is 10 percentage and also i'm going to change the background color okay just like you know and i'm going to change the value if you move if you place your mouse on the yellow means you will get a color picker like this and you can change the color okay and also i'm going to keep this color and save this yeah this is fine i'm going to get the value from the input field by using on change okay i need to create one const and this is uh i gave a name and this is set name okay and also i'm going to create a new state and it's imported here and used it initially empty and also i'm going to create one and also i'm going to create a non-change for input field here okay on change and this is e and i paste that set name i'm going to set this input field in this name okay here e dot target dot value and i'm going to copy this name and here value is this name okay this name and also i'm going to create one click function for add a value okay and this is handle add copying this i want to add a function for uh add button okay const add here just console the value of a name okay save this i'm going to browser and right click and inspect clear the console if i type anything in this input field and if i click add button means i get value here okay i'm going to dynamically add value and also display the value here okay so i need to create one state for store the value all data okay i just give all data set all data this is you state it should be an array and i'm going to remove this console okay and here i'm going to copy this set all data i'm going to paste here and this is new data and also i'm going to create an add an array and this is new data and i'm going to pass this name okay copying this and paste it here okay save this and also this here the name is will be set in this new value new data okay and every time if we add the value and it will set all the data in this all data okay i just console the all okay go into browser and refresh this i'm going to inspect okay and go to console yeah initially i need to remove this you type one and if you click admins yeah it's added here and if you type two or anything you click add means yeah here we get a two values in the array okay this array okay and also if you i refresh this and if you click add button means it will add an empty array so i'm going to restrict that so i'm going to add if condition for um i'm going to check name dot length is not equal to 0 means i can add the push the value okay like this refresh this if i click add means the add button is not added okay click if i click ok but i didn't get any console okay here if i click means i didn't get any console if i type anything and if i click means we get yeah it's pushed here okay and also i'm going to map okay and also if add button is clicked values added i need to empty the input field so i'm going to copy this name and after add i need to set the empty string okay if i click admins i would say if i if i type okay if i click add button means yeah it i will add in that all on this this state okay and also the field is empty okay and also i'm going to map this value and display here okay after this i'm going to paste the all blend all data and dot map here and just give val okay also i'm just created and here just create one h1 tag and paste the valve okay save this yeah this is previous value i refresh this page if i type one two and click add yeah it's added if i type seven eight or anything yeah it's also added okay now i'm going to create a edit and delete okay let's start after this i'm going to create a button one is for edit and also one more is for delete save this yeah this is fine and also um took the tech class for this is edit delete i'm just going to use this same class but i'm going to change the background color okay edit paste that color i'm going to change sorry paste that here and just change the color of this edit color should be in green color okay and save this yeah here it is in green color and also i'm going to change the delete into red okay and also i'm going to change this into red color and this should be in delete say this and also i'm going to change the word color okay color is white and save this i'm going to copy this and paste it here also same in the button also okay i'm going to use this white color and okay if i type add and click add if you again i type and if you click add it's adding now i'm going to do the edit and delete functionality first i complete the delete and also i'm going to create a function for delete okay one click here handy delete is the function and also i'm going to pass the index of this value and also i'm going to get the index okay here add the index here and also i'm going to pass that index here i need to create this after this const paste that value and i'm going to get a index here here i just console the index and say this and go to browser and inspect go to console if i click this this second one okay i get one first index if i click this delete means i get zero okay yeah i get the index and to delete the value using splice okay i'm going to copy this and paste it here dot splice and i'm going to pass the index number and i'm going to delete only one at that time and also i'm going to update this state first i'll show you yeah i'm going to refresh i'm just type here i need to click this one i added and here to okay added if i deleted but if i click that means it's deleted but state is not updated okay and and i will show you how to update state here i'm going to set all data array i'm going to pass the all data here save this go to browser yeah state is updated if i refresh this pins if i add again one this is two okay i added if i click if i one one more i'm going to add three and add it to okay i'm going to delete this two means if i click day two yeah it's two is deleted if i i want to delete one means if i click yeah one is deleted and i'm going to do a edit functionality here on click handle edit okay also i'm going to pass the index okay i'm going to copying this i'm going to create one function for edit and also i'm going to get the index here and i'm going to set the edit value okay and this is handy edit first i'm going to set name okay i'm going to set if edit button is click i need to set the value in the input field okay editor save this and here data i'm going to because all data in this all state okay yes and i'm going to sorry this is all data and i'm going to pass this i okay this side this side i say this so error bye yeah sorry it should be arrow function okay here i refresh this and just add one and i added okay i type two again i click add okay and if i click this edit means yeah value is set here okay if i type anything and if i click admins it will add new one okay i'm going to replace this this add to edit okay and here i'm going to if i'm going to create one true false condition okay i'm just create const this is for hide the add button okay when you click edit okay and here you want to one more button is for update and here this is update okay update function this is okay and also i'm going to win the edit button this this function okay this edit edit clicked i'm going to set okay true or false okay here so and set so okay use state here initially it should be in false save this and copy this and i will show the here if i'm going to use a ternary operator if value is true means i'm going to so if so is true okay i will show the update okay otherwise i will show uh add button here and checking or okay close this initially if state is false okay i'm just say this and go here yeah i get the error while february operator and i close this yeah it should be like this handle update i didn't added okay copying this and i just create tag function for that save this yeah this is fine initially it's in added okay uh if you did click means i need to show this should be update here i'm going to copy this set so and when edit clicks i just change that into false okay false sorry true need to draw the value save this refresh speed if i type one and i can add a add button and again this is two and i added okay if i click if i click edit means yeah it's still to update okay and yeah if i click this two means yeah it's changed dynamically okay and if i click update means nothing is happen because i didn't do anything in this function okay and also i'm going to save this c edit index value in one state so i need to create one more state for store the index edit index set edit index okay you state here so store the index value and also i'm going to pause the index value here okay i'm going to copying this value here and also i'm going to update the value now yeah we are using a same splice to update the value here i'm going to type all data dot splice and here i'm going to pause the index this is we store the edit index in the edit edit index okay here okay and if button click edit button click it will store the index here and we can use that use that here okay and also i'm going to change that into only one i'm going to change only one and also i'm going to update the value here i'm going to pass the name uh yeah uh name having a current unchanged value okay right and save this and refresh this i type one and i can add means yeah it's added if i type two you can yeah i click that yeah it's added if i click it it means i'm going to edit this too okay these two three and i'm going to update okay updated but state is not update white so you can pass the like this this it all data okay you can do this yeah it's status now the state is updated right if i refresh this if i add one one is added if i add two two is also added if i want to change this 2 to 3 and i want to use this 2 here yeah 2 is updated that's why i can add okay after update click i want to change this to add okay so i'm going to set this okay first this is false okay yeah if i click admins yeah it's changed to add and also i need if update values updated okay i need to empty this input field so here i just set name is empty save this refresh this page here i added one two one two okay and here i'm just adding this and also i'm typing something okay i'm going to edit this this second one means here i need to change this to okay and update that this value yeah this is updated and also i want to delete this one two one two means if i click delete means yeah it's deleted and you can delete you can really tell everything okay this is what i try to tell in this video i think this video will help you thank you bye

Channel: Coding Comics

Views: 19,997

Keywords: crud operation insert update and delete in react js, react js insert update delete example, insert update delete in react, crud operation in react js using hooks, how to insert data in array in react, how to insert update delete value in array in react js, react crud operation, react crud, crud operation, get value from input and map the value in react js, delete value from array in react, update value from array react, useState is not update in react, why state is not update, rect

Id: JLu4aBNZ-Po

Length: 22min 35sec (1355 seconds)

Published: Fri Jun 03 2022