Master React Form Handling: Dynamic Item Lists & Deletion | React JS

hello developers welcome back to OCTA cod in our last session we took a significant leap forward with our OCTA travel app we cover the essential of form handling in react dynamically generating form options managing state with use State and extracting form data if you missed it I highly recommend checking out that video first the link is in the description below today we are going to build on that Foundation we'll dive deeper into handling form submissions rendering the form data Dy dally into our packing list and ensuring our application updates seamlessly by the end of this tutorial you'll have a fully functional form that not only collects data but also displays it in real time so without further Ado let's get [Music] started all right in the previous session we crafted the OCTA travel app and manage to the log the form data to the console for example let's select three shirt and click add button and as you see in the console we got an object with the description the quantity and the pack status set to false by default and a random ID okay but however right now we are only logging this piece of information to the console but what we want to do store this information here in the UI in the packing list component right so let's do that right now so back in here in our code first let's create a new state variable called items then as always we have our seter function called set items and so then use State and now what do you think the default value for this state variable should be well remember that these items here are basically the packing items that are displayed here in the UI and so this is an array therefore our initial state for items is just an empty array when we open up this app for the first time of course we don't want to have any item so that's why we start with an empty array here okay so next let's create a handle add item function and this function will receive a new item object which it will then add to the items array so let's immediately will call this function here we call handle add items with the new items we just created this in the console.log okay so now let's use set items to update our items array will basically be the current items array plus the new item added to the end and so what this means the new state depends on the current state and therefore here we need to pass in a call back function so let's call the current state here in this call back items okay so remember that in react we are not allowed to mutate State react is all about immutability so here let's return a new array and then simply spread the current item and then we add another item which is simply called item so that we are receiving here so give it a save and now let's test it out let's say five shirt click add and so we are still logging them to the console but now in the D tools and here in the form component that we are working now and so here we already have our state which already has this new item that we just created perfect so let's do another one let's say two suits and click add and you see that immediately it got to our items array so our updating logic here is working just fine but of course this state is not being displayed in the ui8 right right now our item state is here inside the form component right but we need this item State variable here in the packing list component because this is where it should actually be render onto the UI right so now how do we get this state from the form to the packing list well we cannot pass it as a because the form is not a parent component of packing list it is a sibling component but data can only flow down the tree it cannot flow up the tree or sideways so we cannot pass these items to the packing list via props so how do we do [Music] it so now we need to use a technique which is called lifting up State what we are going to do now is to take this state here so this this line of code and we will move it to the closest common parent component so which one is that well it's simply the app component right so app component is both a parent of the form and the packing list which are the two component that need this dat so let's grab this code and move to our app right here so then pass the item State here into packing list so we Define a new prop called items into which we pass the item array okay then just come to the packing list and accept that prop here we can immediately destructure the props object here and then instead of initial items we will now finally render the actual items and now let's take care of this handle add item function so let's grab this entire function and move it here so now all we have to do in order to enable the form to update the state is to pass in this handle add item function so let's create a new prop let's call this now on ADD items we can call it same prop name handle add items but it's kind of convention for it to be like this so then it becomes more readable like on ADD items calls handle add item okay and then here let's accept that on ADD items and finally here we now need to call the function with this prop so this prop name on ADD items so with this we have completed the rendering items code so let's test it out to see if our list renders correctly or not okay so let's select two shirt click add and there it is working perfectly the list is displayed in the UI great so let's add another three suits and there you go it's working smoothly so we just learned about child to parent communication now let's do some more of it in order to delete items from our list so the it here is that whenever we click on these crosses here it will delete the item from the state and also from the user interface so let's now go back here to our app and create a new function right here called handle delete item now in order to delete an item we need to know which item to delete so we'll pass the ID whenever we call this function the delete operation will update the state to remove the item from from the UI so we call set items and now here in set items we need the new array after the item has been deleted now once again this new items array will be based on the current one and so we need a call back function which receives the current item as its input and so now let's say items. filter which will Loop over the array and each iteration it will get access to the items object so basically all we want to do is to filter out the item that has the ID that we got here right so item. ID is different from the ID so whenever this condition here is true the item will end up in the new array so the array of the item that have not been deleted but when this is false so when item. ID is equal the ID then the element will no longer be part of the final array so that's how we delete elements from array and now so let's receive this prop here inside the packing list so we already have item so let's add this one here to the list on delete item and so this is helpful because now we know immediately what props the packing list will receive and then the click actually happens here on this button so inside the item component here we'll need access to this prop so we need to pass it in along the item right here so on delete item on delete item okay and now here we use the on click prop and then we need to create a new function here on delete item and pass in the current ID so item. ID and that's it I hope this work so let's test it out and let's delete this one and beautiful so that's gone let's delete this one and yeah we clean everything perfect so today you learn how to render an item list and delete items from the list great job so that's it for today's session make sure to review the code and understand each step if you found this tutorial helpful please give it a like share it and subscribe to the channel happy coding [Music]

Channel: Octacoder

Views: 24

Keywords: React, React tutorial, React form handling, dynamic item list, delete items in React, React state management, React props, React beginner tutorial, OctaCoder, web development, JavaScript, coding tutorial, front-end development

Id: RMsBZIKT1qU

Length: 9min 22sec (562 seconds)

Published: Sun Jun 23 2024