MUI Autocomplete in React JS| React JS - MUI Tutorial

Hello friends welcome to my channel hiratakis and this is our react.js midi Railway tutorial and today we can talk about autocomplete component in material living so I am going to cover below topics first we can Implement on basic Auto complex control after that we can see some of the properties in autocomplete so finally we can see how to assign and also how to get the values from our autocomplete component okay now let me go to my application we can start our implementation one by one first I am going to create one new component we can provide the name as Auto it is just a JS file only here we can use this sfc stateless functional component option and let me include this component in the routing side okay this is fine now in our menu set I am going to include one more menu autocomplete the two value is harder okay so let me share this one and I see the output so we have the new menu right so when I'm clicking this one we're currently we are in the autocomplete page so in our component so let me include one h2 tag okay the text is not showing because our menu is hiding so what I'm going to do so let me include one custom class it's not a custom class we are actually overriding see now so we are able to see the text type so here I am going to use the autocomplete control see this belongs to our mui material okay so it is imported top of that and here we have to use the render input and it is having the data parameter so inside that we can use one text field control okay okay this is also done so let me save this one and we can see the current output okay we are able to see one text box and the next thing is we have to populate the data okay for the data purpose I am going to have one static array country so now we have one static array okay for adding the data we have on property the properties options okay so now we have added so next in our text field B how to pass this data okay and also we can include the label for the display purpose so let me provide control okay we are able to see our autocomplete control but when I'm clicking this one I am getting the error so the reason is uh we have one array so the fields are code name and currency but basically this expecting the value is labeled so that's what we are getting the error so the label is nothing but what value we supposed to display so what I am going to do let me provide this uh name as label okay so let me refresh the screen once again so now see we are able to see this India USA and the Singapore so even though if I'm searching it will work India so if I'm typing Singapore okay so it will work so our next question obviously so then if your array don't have the label what is the option so we have one more option okay so now this is our array so let me save this one I am going to create one more object okay so in this object so the first one is options only so here we can provide our country so after that it is having one more property get optional label okay so here we can choose what field we are going to display here so actually we want to display our name only so let me save this one under the line next thing is we can comment these options so instead of that we can use the props option so let me save this one see the response see again it is working so in case if I want to display the code with the name so what we supposed to do see now we are able to see with code and name okay so these are the basic steps the next thing is we have to get the values from this drop down control okay so for that we can use the unchanged event so let me include this on change and this having two properties the first one is event and the second one is value and here our function get data value so let me save this one and also we have to Define this function so let me include this in the console so if you noted in this console initially we don't have any value so once Sam shows to this one see we are able to get all the values code and name and currency and if I'm choosing Singapore see again I am able to get the value so once I'm having this object obviously I can get the individual information so like if I'm providing name see so the aim is coming and next we can discuss some of the properties for this autocomplete control so let me make some alignment here so after the due I'm going to use the grid control so this grid we are going to use is the container and spacing zero and the direction we can use this the column so finally align items okay so let me move everything into sender so we can save this one so we can move all the items inside our grid okay the size also got reduced so let me include once stack control also okay using the stack we're gonna play some styles okay this is fine so next we can replace some variance for our texture field so let me provide standard see the output now so the box Cut remote so similarly let me copy this one I can duplicate this one so instead of the standard I am going to provide another variant filled see so we are able to see some gray background so if you want to include some spacing we can include through from our stack itself see we have some space so similarly we have one more variant that is outlined so outlined is nothing but the default one okay see these are the three different variants and the next thing is so in this slide State we are able to see this open and close items it is so it is just act as like a combo box okay so if you don't want this one that also becomes remember so for that we have to apply one property in our autocomplete that is free solo see now so this first two components we are able to see this icon for the last one we are unable to see but other functionalities are it will work fine only Oishi and similarly we have a lot of properties see like a disabled on select and a clear on Escape disable clearance so we can see one or two items so if I'm using this property so if I'm having something once I'm select so the value is there but this content is not closed see so similarly we have the latter properties if you want to check just go to the official site of material UI so there in this component set we are able to see this autocomplete so here the second example see for all the properties they have included the separate control if you want to check the code just click this one so if you are using JS extension so we can follow these things in case if you are using the TS code just to follow this area Okay so this is all about the concept okay finally let me tell you how to assign values to our auto complete control okay for doing this one let me initiate one use State variable value and value change that is our function you state so if you have some default value we can add it here so let me provide the second on USA and in our auto complete side so here we can use this value property and it just include it so let me say this one see in this initial load it is selected as the USA okay so similarly I am going to include one button also the same data and here let me include one on click event assign data so let me Define this one and using this value change function so let me set this Singapore see once I'm clicking this see it is changed into Singapore okay so in this button okay so let me refresh the screen once again so initially it is the USA once I'm clicked it is changed into Singapore okay this is working fine so in my next video we can see how to work with APA into this auto complete component okay so now we are in the end of the video still if you have any doubts at clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 1,315

Keywords: MUI Tutorial, MUI playlist, React js MUI tutorial, material UI in reactjs, how to use material UI components in reactjs, MUI Textfield, material UI Buttons in reactjs, react js for begginers, how to use material UI components, MUI autocomplete, MUI autocomplete get selected value, MUI autocomplete assign the values, MUI autocomplete event handling

Id: oEnK9YeHMu4

Length: 16min 44sec (1004 seconds)

Published: Mon May 29 2023