React for Beginners #7 - Displaying Data Dynamically

Key Takeaways

[Music] hello everybody and welcome to another react tutorial for beginners in this video we're going to be looking at how we can display data specifically inventory items and how we can add inventory items to our kind of inventory management system now keep in mind that for now everything we're doing is kind of temporary as soon as you refresh the page all of this stuff is going to disappear but in future videos i will show you how we can hook this up to a very simple back end so we can have actual persistent information i'll show you how we can load that information and all that kind of stuff regardless the first thing i want to do here is just clean this code up a little bit so what i'm going to do is change this update data to be update filters so we'll call the search parameters kind of the filters for our data so this will be filters this will be filters this will be filters as well and then instead of update data this will be update filters now i'm going to remove all of these i don't actually want to be displaying any of them right now and we can wise use state giving us an error here so oh it's because i forgot the uh the other bracket okay so filter subfilters use state update filters callback update filters let's save uh let's refresh okay everything seems to be working now i'm going to change the name of this callback to to say update search params like that and then we're going to go into our other component so search bar and we're going to change from props.callback to props.updatesearch params all right so now it's all working the reason i did that is because we're actually going to have something else called data which is going to store our inventory items so in here i'm going to say const and i'm going to say data and then this will be set data what this will be equal to is use state and again we'll make this a uh actually what should we make this we'll make this a javascript object all right so yeah we'll have this be a javascript object and what we'll do inside of here is we'll have a key and we'll just call this key maybe items and items will store a list for now and then what we'll do is we'll add items to this list and it will display all of the items in the list and we'll see how that works in a minute regardless though what we need is we need some way to actually add items to this list and so we're going to make another component now which is just going to be a really simple input field that is going to look pretty much exactly like this it's going to have a name price and type and brand and then we're going to use that to actually insert items into our inventory and so let's actually just copy this search bar component so let's copy this let's make a new file let's call this add item dot js let's paste all this in let's change a few names so this is going to be add item instead of search bar so add item go down here and now export add item and then what we're going to do is just change a few of these fields so almost all of this will stay the same except rather than having the max price this is just going to say the price of the item okay so price that's fine price field price okay i think that's all right and then rather than having the search button pressed we're going to change this from search to say add item and then we're going to change this to say add item button pressed so we'll say add item like that and then we'll change the name to be add item button pressed and then here rather than props that update search parameters we're going to say props dot add item and all we'll do is just pass the item that we want to add so in this case this is exactly what we want we want the name the price the type and the brand okay so that is simple enough let's go ahead and save that and now let's render this add item component to see what this looks like so actually sorry the title of this needs to change as well rather than search for an item we'll say add and item okay and actually is this add a item i think that's probably the the correct way to put that okay so let's go back to app.js let's import this we're going to say from or sorry not from i'm typing in python right now i'm going to say import add item from and then dot slash add item okay so now let's render this so let's go here and say add item like that and actually i want to end the tag in a different way so we'll just do it that way okay nice now we need to pass to this a callback function that function is going to allow us to actually change the data here right to add an item so i'm going to say const add item to let's just say data and then this will be equal to an arrow function and then what we will do is we will say add item is equal to and then the function name which is add item to data we will take in here the item like that and then what we're going to do in here is just add it into items so since we're storing a list inside of this state here right so for items what we need to do is we need to first grab whatever is in the state so we're going to say const or actually not const we're going to say let and current data equals data and then what we're going to do is say data at the key items and then dot push and we're going to push in the item then we're going to say set data and we're going to set this to be equal to the sorry this says current data so we'll say current data like that okay so hopefully this is kind of clear what we're doing is restoring the state in a variable called current data then we're going to push this item into current data we're then going to say set data is equal to current data and that's all we need to do and in fact to do this a little bit nicer we're actually going to say current data is equal to data at items we're going to change rather than current data we're just going to make this equal to items we're going to change this to just say items dot push and it'll push the item in and then we will set data and then we will actually manually write in the items key and make this equal to items okay i know that was a lot uh maybe a little bit confusing but all we're doing is we're just taking the array that's here storing it in a variable adding an item to it and then resetting it in our data this is kind of just the way you need to set uh the state when you have a list in it there's a few other ways to do it but this is the way that i'm going to go with awesome so now when we actually add something it should add that item into the data and what i want to do is i want to actually look at this data so let's just console.log the data after we call this function just so we can see what it looks like so let's const.log data like that all right so we're going to go to inspect now and let's add some item in so let's go name we can just say this is going to be i don't know what's an item we might buy cookies okay let's make the price to 99. uh we can make the type chocolate or actually we'll just say maybe raisin do you guys like raisin cookies let me know okay brand um do we need a brand for this we can just say original okay so add item when i press that it says items array we can look at the items we see we have name cookies we have blah blah all the other stuff uh associated with it it's kind of cutting off if i if i move this over maybe we can see it yes okay cookies price type and brand nice now let's add another item so we can just add that and now we're going to see we have two items in the array now if we look at these these are two identical items awesome so we'll look at how to display those items in one second but first i want to make it so that we actually clear this add item kind of form here or field as soon as we call this callback function so let's go ahead and do that so after i add the item and i do this here i call this function i want to clear the state so what i'm going to do is say set name and we're just going to set it equal to an empty string i'm going to say set price and we can just set this back to b0 we're going to say set type make this an empty string and then we're going to say set brand and same thing in empty string so now if i come back over here and i press add item you can see that it clears there's now three items in the array and there you go all is good and if i press add item again notice we have now another item and this one is just kind of empty right because we didn't fill in all those values nice so that is now working so we will continue in one second but i need to quickly thank the sponsor of this video and this series which is algo expert algo xp is the best platform to use when preparing for your software engineering coding interviews each question has a detailed video explanation and code walkthrough that is taught by a great instructor i am actually an instructor on algo expert a bunch of the questions on there are made by me you can get started using algo expert today by clicking the link in the description and using the code tech with tim for a discount on the platform all right so now that we have some way to search for an item or at least to get the search parameters and some way to add an item i want to take all of the data that is in app.js here and what i want to do is i actually want to use it to display the information right so how are we going to do that well i'm actually going to build another component now that will kind of be our data display and we'll pass all of our data to it through a prop so let's make a new component and let's call this data display dot js and actually maybe we'll call this items display yeah items display seems to work for me so items display dot js now inside of here what i'm going to do is make my function so if i say function and then items display we'll take in some props and then we will return whatever we want to render so in this case we'll do a div like that all right so what i want to pass to items display we need to export this let's say export default and then this is items display like that what i want to pass to this so let's go to app.js is our data right or all of our items so now in between this search bar and the ad item i will render my items display so we need to import that i'm going to say import items display from and then items display like that all right so now let's use it we'll say items display and then end the tag and we will say our items are equal to our data at items sweet so now we are actually passing that through it's in cannot find items display did i spell this wrong or something items display dot js let's just save that refresh can't resolve items display in react okay for some reason that's not working i don't know why that's not working it should be importing it for us items display items display ah okay so it's because i forgot the dot slash so now if i save this you can see that everything is working sweet so now what i want to do though is i want to actually look at all of the items right so i'm passing them through items equals data items but i need to render them in this component so to render them in this component i'm going to show you how we can render all of them at the same time using something known as map so what i'm going to do inside of here is start writing some javascript code i'm going to say prompts dot and then this is going to be items dot map and inside of here i'm going to write a function i'm going to write an arrow function and what this function is going to return is a component that should be rendered for every single one of these items so inside of the parameters here i'm going to say item item will be equal to one of the items in the items list and in case you're unfamiliar with map what it does is it takes all of the items that are inside of a list and it maps them to a function so a function runs for every single one of those items and then you can return something from those functions and what that return value is will actually be rendered to the screen so to do this really simply right now if i just make a p tag and i say name colon and then i do this equal to actually i don't do that i can just say item dot name uh this should be good actually now that i'm thinking about it i might need to put this yes i do okay so i do need to put this inside of curly braces but if i do this now you should actually see that if i start adding items they show up so let's try this let's go name cookies price 2.99 say original brands none add item and actually nothing happened there okay so let me go to inspect and see if we're getting an error looks like we are printing something out but nothing is being rendered on the screen so i realized why that was happening i forgot to actually return anything from this function so we do need to return something and now if we return something you can see name cookies is showing up okay so my bad on that guys make sure when you're using map and you define this function which i've done here you actually return a value if you don't return a value then obviously well nothing is going to show up so now you can see we have name cookies and then we can show the rest of the stuff that we want as well so let's just make a div and inside of here we'll just do a bunch of p tags that show all of the stuff so let's copy that let's paste that a few times um what's the problem here return div i think that needs to be inside of a parenthesis for some reason it's giving me an error it says uh what is it saying here div has no corresponding closing tag oh it's because that needs to be slash diff okay so now we're good now we have name but i don't want to just display name i want to display the price so we'll say item dot and then this will be price and i want to display the type so item dot type and then the brand as well so let's go brand and then item dot brand nice now we have name price type and brand and then finally i want to display kind of the id of this item and the id of this item uh for me is actually just going to be whatever its index is in the list and so we can just put at the very top we can say p slash p and then actually to get the index in the list i don't know if that's possible like this so what we're going to do is add a field to our data when we add it in so if you go here to app.js notice here what we're doing is we're pushing this item in before we push this item in what i want to do is add a field to it that defines what the id of this item is the id of this item will be the order in which it was inserted so whatever the index of it's going to be in the array the way we can figure this out is we can say items dot and then id is equal to and then this will be items dot and i think it's is it length or is it size i always forget in javascript i think you can use length and then that will be the id of this item okay so hopefully that's going to work we will see in one second so now here i'll say the id is equal to and then item.id and now what we're going to have to do is refresh and add a new item so let's go name cookies let's go price 299. let's go type we can say you know vanilla or something brand uh you know normal whatever now if i press add item okay the id is empty for some reason i don't know why the id is empty oh it's because i'm saying items.id not item.id mybad on that let me refresh this we're going to have to add a new item so let's go cookies price 2.99 we'll leave the others blank press add item and then notice our id is zero so let's add another item let's just add uh i don't know what do we want to add here we can add some water this can be 299 the brand can be the sani i think that's how you spell it even though that's my least favorite type of water and then type we'll just say i don't know normal whatever and then add item and now notice it has id one okay so that is how you display multiple items let me just quickly run through what we've done here i know i kind of went through a lot and was skipping through some stuff but i just wanted to get some code down on the page here so let's go to items display inside of items display we're taking one prop that prop is items and then what we do is we actually return or render using map a bunch of separate kind of components here or divs that display this item and so the way we did that is we said props items.map what this means now is run whatever function we put inside of this map here and whatever it returns we're going to show that on the screen and so here we're running this function that takes the item the item is one of the items from the items list it grabs his id name price type and brand kind of nicely displays that and then returns a div and that div gets rendered onto the screen and that's kind of how this works now if you didn't want this to be so messy you could take this function here and you could put it inside of its own function right like i could say const and we can say you know show item is equal to and then an item and then this will be equal to an arrow function and then here what we can do is just have this return statement and now if i remove that parenthesis this actually should work if i pass in show item like that so now if i pass show item what i'm doing is just using the function that i define here works the exact same way except we just kind of move the function rather than being in line to a named function called show item so let's try this let's just go cookies and just add it in and notice it still works the same way as it did before awesome so that is how the items display works now if we go to the search bar we actually already looked at that so we don't need to look at it again but we can look at add item inside of add item this is very similar to the search bar all we're doing is when we press this button we're calling the add item button pressed we are then calling a callback function that was passed to us in the props from app.js and then we're going to pass the name price type and brand kind of the search parameters or the filters if you want to call it that and then what will happen is we will set the filters to be equal to whatever was passed to this callback function so that will change the state here and then we have add item to data this is the callback function that we passed to our ad item and what happens is whenever we create an item here so we press that add item button it's going to pass all the details of that item to this function we're then going to get the list of items we already have from our state so from data we're then going to figure out what the id of our next item is going to be so whatever the length length of this list is is the id of the next item we'll then push the item in we will then set the data to be equal to this new items array that we've kind of modified here and then we're console.logging it and of course we're rendering all of this stuff all right so that is a pretty good start for this application in the next video what i will do is show you kind of how we can style this and then we will actually make it so we're filtering the items that are showing up based on the search in a different video i was going to do that here but the video is getting kind of long so we'll kind of you know push that forward to another video in the future anyways i hope you guys enjoyed if you did make sure to leave a like subscribe to the channel i will see you in the next react tutorial