MUI Autocomplete in React JS & loading data from API Call| React JS - MUI Tutorial

Hello friends welcome to my channel hiratakis this is our react.js material away tutorial so in this video I am going to implement autocomplete component using APA data okay so in this series already I have created one autocomplete video there we have covered some basic topics and for the data load I have used the hard code array okay so now let me go to my application we can start our implementation one by one based on my last autocomplete video I have created this component so this is mainly for auto complete control only and here we can see this auto complete control for the data purpose I am using this props so if I'm checking this one here we have this options and also this get option label so in this options I have used this country this country is nothing but an array it having some hardcore data okay so instead of this hardcore data we can get the data from our APA okay for the API point of view I am going to use the Json servers GPA so the same API only we have used in our material away table video also okay so let me go to my material UA table component okay this is our API endpoint so let me copy this one see we have a response like this okay next in our router component also I'm going to use this ucf8 hook so this is kind of function only but it will be executed on the page load we can provide the zero dependency okay this is fine and also I am going to declare one use State variable for holding our API data it's a constant M list so the default value I have provided one array okay so let me format this one next using this fetch option we can call our APA so this is our AP and point URL we can return our response into Json format okay so after that using this change M chains again I'll send the values into our M list and if there is any error we can capture in this console so e Dot message okay we have done the basic steps so let me format this one and also we can see the current output okay the initial value is loaded if I am searching like something it is filtering okay now instead of this hardcode value let me use this m list in our prop side I'm just changing this one if I am reversing the screen once again I am getting like undefined Ramesh so the reason is so in this label we have binded like code and the name okay but he never upset we are getting like ID name email and phone number online so let me change this code into ID so let me refresh once again see now we are getting the value of combination of code and name okay now we can get the data from this autocomplete so already we have written the function so in this unchanged event we are calling this get data function so whatever value is coming we are just capturing this console okay so let me remove this one so now let me open this console also see if I am clicking this one I am getting this complete object okay now we are getting the complete object okay so next what I'm going to do let me do some customization instead of this complete object we can bind the single Fields okay so we can take this name from our definition provide so in this options I have directly used this same list okay so here I'm going to use the map keyword this option dot name so since I'm binding this name only so let me remove these two items so we can save this one I just refreshed now if I'm trying to take the value see Ramesh single values only so we can see in this console also I just selected this William so now if I'm trying to select this all but I am able to get the in Digital Data okay so whatever value we have selected that we are able to get in our console also okay so next what I'm going to do so instead of the single value we can use this the object okay so this property is name so similarly I am going to include one more property that is the ID okay so option dot ID we can use it here and let me format this one and in this get option label also instead of this options because it's having the object so we can provide us options dot name okay so let me say this one so let me refresh it so I am able to get all the values okay or search function is working all the records are loaded if I'm selecting this rajes I am getting this ID and the name also so similarly if I'm choosing some other name okay so whatever data we are selecting based on that we will get the complete object information okay so now we are in the end of the video still if you have any doubts or 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: 102

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, react autocomplete with api call, mui autocomplete with api call

Id: BnYQukWcwdE

Length: 7min 17sec (437 seconds)

Published: Mon Jun 26 2023