The Component and Its Callback Function

----------------------------------------

This component is kind of the way that you can in a child component update the parent component. It's a little bit confusing, but that's kind of how that works. So, let's go ahead and do this. When the search button is pressed, what I actually want to do is say props.dot.callback and I want to pass to this the data. For now, I'm just going to pass data and we'll just say you know test. We'll actually put these fields in there in one second.

Now, what will happen is we'll call the callback function. We'll pass this javascript object and then here we will update our data to be equal to that javascript object that was passed. If we want to look at this javascript object, we can do so by going p and then we can just say what should we do here? Data, although the thing is since data is a javascript object this isn't really going to work very well. We want to say data in data question mark if that's the case then we'll say data.data otherwise we'll say no data to display and this needs to be in quotation marks.

Hopefully, that kind of makes sense but let's see here it's saying no data to display, but then as soon as we actually press this, notice that it changed. Changes to test. Right. So it actually updates because we called that callback which then changed the state so now let's finish this up by just removing all of these because we don't need these anymore.

Now, let's make it so that we actually pass rather than just data all of the different values here. The name, the price, the type, and the brand. So, let's do that. We're going to pass name: name. We're going to pass price: price. We're going to pass type: type. And we're going to pass brand: brand. We're going to save that and then this should be all good.

Okay, so now what I'm actually going to do instead is uh it's a little bit of work but let's just write it out because we need to do this rather than checking if data is in data. I'm going to check first off if name is in data. If name is in data then I will display the name and we'll just put kind of name: like that. And then we'll copy this and we'll just do the same for all of the other keys that we're expecting in this data.

Around the name next, we're going to have max price and then rather than checking name, we're going to check price. And then we'll display price. And then the next one we had i believe was type. So rather than checking name, we're going to check type. And then lastly we had brand. So let's do that:brand:brands.

Finally, brand. Okay, so now you can see it says no data to display for all of these because well we don't have any data here. We start with an empty object but now if i go here and i go all right we're looking for i don't know maybe fruit our max price is going to be 10 uh the type is let's just say n a and the brand is maybe going to be organic. I know this doesn't really make any sense but let's just search and notice that now this updates so we have price:10 or sorry we have name:price:type:brand and if we change this we make this empty and now we press search notice this goes away.

Now, the reason why it's not showing us no data to display is because we do actually have a key called brand however what's being stored in brand is just an empty string because here we have an empty string for the state for brand so hopefully that kind of makes sense but i just wanted to show you here how we can actually pass data kind of up our react components.

So, what we do is we pass a callback function so we can actually modify the state of a parent component from a child component and you kind of saw how that worked. We passed the data as a parameter to this callback function and then this callback function used that data to update the state in this component and that caused this component to re-render and then display everything that is here.

Building the Add Item Component

-------------------------------

In the next video, we think what we'll do is actually build that add item component and we'll show how we can display all of the different kind of inventory items based on the search results.

"WEBVTTKind: captionsLanguage: enhello everybody and welcome to the react tutorial for beginners in today's video i'm going to be covering forms and events now specifically what we'll be doing here is actually taking all of the knowledge all the stuff we've learned so far and applying this into creating some real components some components that we'll actually keep throughout the rest of this tutorial series and that will help us start to build our inventory management system so what we're going to be doing here is building the inventory management system i described this briefly at the beginning of the series the idea for this is that we're going to have kind of one component that allows us to add items into the inventory another component that allows us to search for items in the inventory and then some type of display for all of the items and we'll get into styling and making this look better in later videos for now i'm just focused on the functionality and you know getting some stuff on the screen and showing you guys how this stuff works so right now let's actually go ahead and delete almost everything that we've done so far so i'm going to get rid of info going to get rid of button state and data here i'm going to go to info and just delete this entire file we don't want this anymore and i think that i mentioned this previously but i'm going to delete this setup test file i don't know why that's back in this app test.js all right so let's delete that and now all we have is this app file all right so actually let's go ahead and create a file here i'm going to make a new file and call this searchbar.js and then i'm just going to go to app.js and remove these three things here because obviously we don't need these anymore okay so let's remove those and go back to search bar and now let's create a component so first i'll actually import some stuff from react so i'll say import and then we'll import use state from and then react and then we'll define our function function search bar and we can take i guess we could take some props we'll take some props there and then here we'll go ahead and start rendering the search bar so return and then let's create what we want so for the search bar what i want to have is a few different fields i want one field to look for say maybe the name of a product maybe one for the maximum price of a product uh and there's a few other things we could do as well i'm just trying to think what we want to store for like our items in inventory this is again going to be kind of just like a simple example so maybe we'll have something where each item has maybe a name uh a price uh no why is this not giving it to me properly okay so name price we can go with maybe uh you know type of item and finally maybe we could do maybe brand of item or something like that so we'll say that these are the four fields that we want and so we'll make kind of four corresponding fields here in the search bar so you can search for items based on any of these four fields so let's start by creating a form here we'll say form like that above this form we can make a header so we'll say h2 and then we'll say search for an item and we'll style this for my in one of the later videos okay so for the forum we don't really need anything inside of there what we can do is we can make an input tag so we can say input like that we can then do a label above this input so we'll say label slash label this label will be four and then we need a class name here so we'll say actually not class name we need an id we'll say id is equal to and then the first thing we'll have is name field like that yeah okay that works and then this can be for name hyphen field all right so the label here we'll just put it as name and then the input this will be type equals text and i think that's probably all we need for the input tag and i think we can actually just end the input tag like that okay so let's copy this a few times so we will have name we will then have price so we'll say max price and i think for type for this we can make this a number i think that's a valid type at least and then i said name field we'll just make this price field like that and we could do a min price too but for now we'll just do a max price we can add stuff later on now we'll copy this and what else do we want we want the type so let's go with type here and then set a price field we can do type field and type field this will then be a text and one more is going to be the brand so we'll say brand like that and then brand fields brand field and again set a number we are going to have text all right and then we want a button this button will be search so we'll say button and then this can be search like that and it's not actually necessary to put this inside of a form but we're just going to do that because it's kind of you know good practice okay so for some reason this isn't auto formatting i wonder if i made a mistake here oh it's because i have this up here let's remove that and there you go now we get our auto formatting okay so let's actually use this now let's render this component so we're going to go to app.js we're going to say import and we need to make sure we export this so we're going to say export default and then search bar like that all right then we will come here and we will import search bar from and then dot slash search bar like that okay now we can render this so let's go with search bar and then end the tag okay so now we can see we have our name our max price our type and our brand now obviously it doesn't look too nice right now but that's fine we'll just leave it like this for now and when you press search you can see it actually does something for the form i think i can turn that off because i don't want it to actually refresh the page when we press search so let's actually figure out how we can make it so that when we press the button the form is not active okay so i think the way to fix this is to actually just make this type equals button rather than type equals submit and now if i refresh this and i press search notice that it's not actually refreshing the page okay so there we go we now have our button i think by default this is equal to a submit button and so when you make it just a regular button i will not submit the form awesome that's kind of what we're looking for now that we have done that what we want to do is actually have some state for all of these fields ideally what i want to happen is when i press the search button we are able to get access to whatever is inside of all of these fields and for now we'll just print it to the screen but we actually want to return that probably to app.js where then we could render some different data depending on what we searched for so we're going to use state here and we're going to define four pieces of state one for the name one for the max price one for the type and one for the brand so we're gonna say const like that and then we're gonna say name and then set name is equal to use state this will just be an empty string by default and then we'll copy this a few times and we'll change this appropriately so rather than name we want this to be price so then this is going to be set price and the default here uh we can make this actually just zero for now and then instead of name we are going to have the type and we'll say set type this can be an empty string and then lastly we'll have the brand and this could be set brand and again that can be an empty string all right so now we want to do is make it so that whatever the value of this state is is actually what's being used for these inputs and so what i'm going to do is for all of these inputs say value is equal to and then the corresponding state variable in this case we'll go with name now here for this we're going to say value is equal to and this will be the price and then same thing here for the type value is equal to type and finally value is equal to brent okay so now we're going to save that i'm going to refresh and notice though when i go here and i start trying to type nothing is happening now the reason nothing is happening when i type here is because we have explicitly set the value of these fields to be equal to our state and our state is kind of constant right now it's not changing we have nothing that's updating our state and so when i try to type something here well nothing's going to happen and whenever you set the value equal to something explicitly on one of these fields well to be able to change this value you actually need to implement an event handler and this is where we get into events so whenever we start updating this input field there's actually an event that will be triggered called on change so if you say on change you can make this equal to a function we're actually going to do an arrow function here and what this arrow function will take as a parameter is e now e is kind of the event that occurred that caused this on change thing to be triggered and e will allow us to actually access what the user typed into this input field and so what we're going to do here is have an arrow function and we're going to say set and then in this case name and this is going to be e dot target dot value 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 expert is the best platform to use when preparing for your software engineering coding interviews they have over 155 coding interview questions all of those questions have detailed solutions in nine of the most popular programming languages as well as a video explanation by a great instructor get started with algo expert today by clicking the link in the description and using the code tech with tim for a discount on the platform so this is kind of just what you do when you want to actually update the input field that is using state to kind of control its value you put an on change and then you take a parameter e e will automatically be passed to this from the on change event handler and then we will call set name and we will update our name state to be equal to whatever the user typed in which we're getting from e.target.value so you don't have to fully understand what this is but when you say e.target that's getting the actual component here which is input and then we're grabbing the value and then we're updating our name with that and so when we update our name the field will actually change right so when i go hello we can see it actually changes whereas here if i go over to type and i try to type something well nothing happens so now we're just going to copy this exact same thing for all of the different functions so let's go on change or sorry not functions but different input tags and rather than set name here this is going to be set price and then we'll do the same thing here for the type just change this to set type and then lastly here do the same thing for brand we'll say set and then brand okay when i save that you can see this updates now if i refresh here and i go and i change these you can see that all of these are working the same because now we have the event handler now let's see if we're getting any errors i just want to look in the console quickly warning invalid dom property 4 did you mean html4 see i wonder why this is incorrect because usually i've used four and it's worked let's just see if i change this to be html4 if this is gonna do anything for us um okay it doesn't look like it actually makes a difference at all to be honest but let's change it for all of them and just see if this error goes away one of you guys can maybe correct me in the comments here if i'm mistaking something but usually i've used four and it's worked before so html4 and then html4 okay so let's go to inspect and okay we're not getting an error now so i'm going to assume that what i just did is correct so we'll leave that nice okay anyways now we've done that and we have the state and the state should be holding everything that we're typing in these fields so now if we actually want to see what was typed into these fields when we press the search button we need some kind of event handler for this and so what i'm going to do is create a function here and i'm just going to say const and then search button pressed and this is going to be equal to an arrow function and all we'll do here is we'll just console.log all of the stuff so we'll call usa.log the name we'll console.log on a new line the price will console.log the type and then finally the brand okay so let's save that and now let's set this function on the button so let's go here and press or say on click is equal to and then what i call this search button pressed okay so now we've done that let's open up our console here and let's type something in so name tim price let's just go 23 brand whatever we can make this uh i don't know test and then or sorry type test and brand can be test2 when we press search notice all of them are printing out if i change this to be test three and i press search uh now test three we're getting getting that update occurring there awesome so there you go that all works and now we have implemented the state we have created a form and we're able to actually access all of the values in this form from the state of our component so now what i want to do though is i want to actually display the stuff that we were searching for either in this component and maybe a child component or i want to pass what we were searching for to whatever rendered this search bar so how do we go about doing that well this is where it gets a little bit more difficult but i'm going to actually make it so that we are showing something here uh maybe below the form that displays all of the stuff that we search for so let's actually just say in a paragraph tag here let's go with name colon name let's go with this is going to be max price and then max price uh oops this is just called price okay so let's make that price if i could type that properly let's do another p tag and what do we want to make this one uh this is going to be type and then lastly we have our brand so let's go ahead and do that brand colon and now brand okay so i'm going to save i'm going to refresh here and you can see that we have name max price type and brand so let's just go tim let's press search and notice it updates right here so there you go we have now created our search bar okay so now that this is displaying here i'm going to show you how we can actually send this information so all of these things right here back to this app component we're going to do this through a prop so remember how i told you that we cannot modify props they're read only values because what might be a clever thing to do here is to maybe make a variable up here make a state up here or something right so we'd say const i would say data and you know set data and then this would be equal to use state and then maybe we would try to pass this data maybe this is a javascript object or something to search bars we say data equals data and then in search bar we're like okay well this is easy we can just update data and then it will change here and we'll have access to the data but we can't do that so instead what we need to do is we need to pass a function to search bar that we're going to call our callback and we can call this something else we will in a second but for the formal kind of term of what we're doing here is a callback and this function will update the state in this component and it will be called from the child component so just bear with me here while i do this i'm going to say const and this will be update data is equal to a function and what we'll do here is we will take a value so we'll take some data we'll say data is equal to data like that and actually let's just call this search params because that makes a bit more sense search params standing for search parameters let's make this search params okay so now actually sorry we want to change the state so we're going to say set data like that and then search params and then i realize that we want to import a use state so let's go ahead and do that and say import use or import views state from and then this is going to be react all right so apologize for all the typing but now we can stop for a second and explain what we're going to do so we're going to take this function here update data we're going to pass this as a callback parameter to the search bar so now in search bar we can access from the props this parameter here called callback and what we can do is call that function and what this function will do is then update the data right so we'll actually call set data so we will change the state in this component and that means that we didn't have to change any of the props here we just called a function that then changed the state on the component that rendered us so this is kind of the way that you can in a child component update the parent component i get it's a little bit confusing but that is kind of how that works so let's go ahead and do this so when the search button is pressed what i actually want to do is say props dot callback and i want to pass to this the data so for now i'm just going to pass data and we'll just say you know test but we'll actually put these fields in there in one second and now what will happen is we'll call the callback function we'll pass this javascript object and then here we will update our data to be equal to that javascript object that was passed so if we want to look at this javascript object what we can do here is go p and then we can just say what should we do here data although the thing is since data is a javascript object this isn't really going to work very well so we want to say data and then at data but only if data is in data so a little bit confusing we're going to say data in data question mark if that's the case then we'll say data data otherwise we'll say no data to display and this needs to be in quotation marks okay hopefully that kind of makes sense but let's see here it's saying no data to display but then as soon as we actually press this here notice that it changed changes to test right so it actually updates because we called that callback which then changed the state so now let's finish this up by just removing all of these because we don't need these anymore and now let's make it so that we actually pass rather than just data all of the different values here so the name the price the type and the brand so let's do that we're going to pass name colon name we're going to pass price poll and price we're going to pass type colon type and we're going to pass brand colon brand we're going to save that and then this should be all good okay so let's try this out okay so now what i'm actually going to do instead is uh it's a little bit of work but let's just write it out because we need to do this rather than checking if data is in data i'm going to check first off if name is in data if name is in data then i will display the name and we'll just put kind of name colon like that and then we'll copy this and we'll just do the same for all of the other keys that we're expecting in this data so around the name next we're going to have max price and then rather than checking name we're going to check price and then we'll display price and then the next one we had i believe was type so rather than checking name we're going to check type so let's go with type and then lastly we had brand so let's do that brand brands and finally brand okay so now you can see it says no data to display for all of these because well we don't have any data here we start with an empty object but now if i go here and i go all right we're looking for i don't know maybe fruit our max price is going to be 10 uh the type is let's just say n a and the brand is maybe going to be organic i know this doesn't really make any sense but let's just search and notice that now this update so we have price 10 or sorry we have name price type and brand and if we change this we make this empty and now we press search notice this goes away now the reason why it's not showing us no data to display is because we do actually have a key called brand however what's being stored in brand is just an empty string because here we have an empty string for the state for brand so hopefully that kind of makes sense but i just wanted to show you here how we can actually pass data kind of up our react components so what we do is we pass a callback function so we can actually modify the state of a parent component from a child component and you kind of saw how that worked we passed the data as a parameter to this callback function and then this callback function used that data to update the state in this component and that caused this component to re-render and then display everything that is here all right so that's going to be it for this video hopefully this kind of cleared up how the state works how you can pass it between different components in the next video i think what we'll do is actually build that add item component and we'll show how we can display all of the different kind of inventory items based on the search results so with that said i hope you enjoyed if you did make sure to leave a like subscribe to the channel and i will see you in the next react tutorial you\n"