React JS Interview Questions ( Multi Select Search ) - Frontend Machine Coding Interview Experience

so in a recent fronted interviews I was asked to Showcase one of my projects and I showcased my chat app which I built using M Stack so in this app there's a feature for creating a new group chat if I give it some name let's just add someone let's just add a guest user over here so yeah did you notice something when I clicked on any of these this spill got added over here and the interviewer asked me to recreate the same feature but with some different specification like for example if I search over here and click on any of the search suggestion it should add this pill inside of this input field and input cursor should shift forward and similarly we can add more people over here as well and let's say if I press backspace this spill should be removed so let's see how we can go on and create this component using reactjs so I've opened vs code over here and you can see I've already created this folder multi select input let me just go inside of it so CD react just interview questions and inside of it this multi select input okay let's initialize a new V application over here or a new reactj application over here so I'm going to say npm create vat at latest and this will initialize a new react app inside of this multi- select input folder so it's going to ask us what's the name of our project I'm just going to press dot so that it creates the project inside of this folder I'm going to select react and JavaScript and it has initialized a new react app over here let's go on and uh install all of the dependencies so I'm going to say npm install and it's going to install all of the dependencies inside of this package.json like react react do Etc and while it's installing these dependencies I need to tell you that the project that you saw at the start of this video I've already created a complete playlist a complete M Stack playlist on that project so you can click the link in description down below and build that M Stack project as well okay there we go our dependencies have installed let's say npm run Dev and it should run our tab successfully okay let's control click and there we go our react T has started so what I'll simply do I'll just um go inside of this SRC inste of app. CSS I'm going to remove everything I'm going to remove this assets folder I'm going to get R of all the Styles inside of index.css inside of app.js I'll just remove this all of this and I'll just keep uh a div inside of this return and I'll just say hello world that's it and now if we go back to our app you see we have Hello World rendered over here cool then first of all let's add some basic uh Styles like uh font family to sensor if so that font looks a little bit better okay now the first thing that I'm going to be focusing on is creating an input field so instead of this hello world I'll just uh div which will contain our user search uh input and inste of it let's plan our app a little bit so we will have an input field with all of the suggestions that it will render and other thing is going to have our pills which are going to be rendered on top of our input field right so let's just write it out real quick so I'll have uh something which will contain all of our pills component and I'll have our input field over here input field with suggestions or search suggestions right so let's create a div which will contain our input field and search suggestions now I'm going to have a input and below this I'm going to render search suggestions okay we have pretty much planned out whole of our app and if we go back you can see we have just one input field over here right now let's create a state over here so to create a state we just say use State and we have to import it from react and this use State gives us an array which contains two things one is the variable and other is the function or the seter function which is going to be responsible for changing that so search term comma set search term by default this used state is going to be empty so simply in the value of our input text I'm going to say search term and on change this will simply say it will take the event and say set search term to e do Target Dot value and also let's give this a placeholder which will say search for uh user and also this div right over here I'll just give it a class name of user search container now let's go on and give these some bare minimum Styles but before moving forward are you struggling in reactjs and looking to learn it from absolute scratch let me tell you about the react web development course from Odin School a 3month roller coaster of learning and Hands-On fun and the best part it's not just for Tech experts recent grads from any background are welcome that too with a 360° placement assistance Yes you heard it right they won't just teach you but guide you towards the success check out their inspiring placement success stories at Odin school.com SL success-stories and here's the game changer Odin School negotiates for the best salary packages on your behalf they've got your back from the classroom to the boardroom now investing in your future is a big decision right that's why they offer an Emi option that suits your budget plus their fees comes with an early bird offer of up to 10,000 rupees making your journey towards expertise even more affordable so mark your calendar because the new cohort is about to start there are live weekend classes and recorded lectures ensure flexibility that fits your schedule and obviously the unlimited job opportunities that Odin School opens up for you so are you ready to level up your career in react web development visit the first link in the description down below for more details so I'll go to app. CSS and here I'll just bring all of the Styles real quick and explain you what I'm doing so we have user search container that is this style so here I'll just say display flex and position is going to be relative why am I putting position relative because this inside of this we have this pills which is going to be absolute and it's going to be with respect to this class name over here you will see when I go on and create this pills you will see uh why I give this position relative because that is going to be absolute now inside of this user search input that is this div over here we will have width of 100% as you can see yep we have given it width of 100% some display flex and align items to Center you can see we're tapping something and this is aligned at the very center of this input field Flex wrap because we will render all of the pills over here and when they are too many pills over here they will drop to the next line along with our input field as well some gap between all of the pills and input fields and some border and Border radius that's some normal stylings and for our input field we're giving border to be none some height and some padding and for input Focus if you just remove it you can see if you click on it it creates this outline right we don't want that so I've put outline none so now you might be thinking where will we get the user data from right so we will use dummy Json API so generally in the interviews the interviewer will provide you such apis so if you go on over here and search dummy Json Json users API so yep there we go we have this uh docs and inste of this for searching the user we have this endpoint if we copy and paste it over here you can see we're searching John and we're getting all of the results with respect to that John like Jonathan and um okay we're just getting one name over here if we just say j o we're going to get bunch of names like uh josin and and um Jonathan Etc right so this is what we're going to use and this is where we will send our search term cool let's just copy it and close it I'll just paste it right over here now below this I'm going to create a function called Fetch users and what it's simply going to do is first of all it will check if search d dot trim we're going to trim it is equals to empty if that's empty if our search term is empty then I'm going to say simply return and also I'm going to create another use State over here which is going to contain our suggestions or search suggestions by default it's going to be empty so inside of it I'm going to store all of the results that we will get from our API right so I'll just say if this is empty just say search suggestions to be empty we're not going to show anything to our user but if that is not the case here we will fetch our API so I'll say fetch so instead of back text I'll just put this and instead of this J I'm going to put my search term over here this search term and then I'll say dot then we will get some response from this right I'll just say response and I'll say response dot Json I'm going to convert it into Json and then I'll have another dot then chained which will give us the data so data and I'll say set suggestions to data and also we're going to have have a DOT catch over here which will handle the errors for us console log this error E R R okay let's just call this function inside of a use effect hook so use effect this use effect is going to be fired every single time the search term changes so I'll say search term and it's giving us use effect has Miss dependency F user so it's better if I just uh bring this function inside of this use effect all right now let me show you if I go back to our app if I just open inspect and the network tab if I type something inside of it like j o yep you see it's fetching for us inside of the response we're getting all of this result great then let's go on and render all of these results right below this so over here I'm going to create an unordered list and I'll just give it a class name of suggestions list inste of it I'm going to render all of these suggestions so I'll just copy it and I'll say suggestions. users so if you go back and see inside of our Network field we have suggestions do users and then we will have all of the users inside of it so suggestion let me just put uh optional chaining over here just in case it's not populated yet so sessions. users do map I'll put optional chaining here as well let's take one single user and the index just in case this index is useful for us sometime and I'll say return a list tag with some key of user. email so why am I giving user. email over here as a key so if you see the IDS are just normal 11 12 like simple IDs right I don't I want some complex ID which is you know unique to that particular user so that's why I'm using email because obviously the email is going to be unique to that particular user right and inside of it we're going to have the image for a user and its name SRC will be user. image in the alt tag I'll have back Tex and I'll just render user. first name and user do last name below this I'll have a span tag which will render the same same thing actually user first name and user. last name user first name let me remove this dollar sign let's see okay we're getting all of these users but these images are huge we need to take care of these and also this is expanding our input field I think we need to create a separate element for these or maybe make them position absolute I guess to render them properly let's see let's go on and style these one by one so I'll go to app.css I'll just add for our suggestions list this uh suggestions list class I'll say Max height has to be 300 pixels because we don't want if we have hundreds of results it it will go beyond the page right so I want the max highight to be 300 pixels overflow y to be scrolled so that we can scroll if there are more than you know contained results like result that we can contain list style is going to be none so that we don't see that dot below the list position is going to be absolute now we're going to position them with respect to our input so now you see yep this is the only space that we want to give our suggestions and yeah again we're going to take care of this image as well so for one single list I'm going to say display to be flex and align items to be centered so that they are aligned to the very center you can see yep you see the name has been aligned to the center then the Gap is going to be 10 pixels between them there it is some border bottom to be 1 pixel solid grayish color and some cursor pointer you can see my cursor is pointer when i h on them but for my last child in this list you can see this has border as well I don't want to give the border to the last child because this is looking odd so I'll just say suggestion list Li colon last child I want to say border bottom to be none and when we hover on each of these I want background color to be this and the images are going to have the height of 20 pixels so now you can see see now it looks much better when we hover on them as well this is giving us this hover state so this is great now let's go on and work on the logic when I click on any of these options it should get selected so inside of app.jsx I'm going to create a state over here called selected users which will be an empty array by default and I'm going to create a function over here const handle select user and inside of it we are going to write our logic so let me just copy it and give it to our list tag so yeah list I say on click it will call this handle select user with the current user that we have selected so let's just receive it over here user and we're going to do a few things over here so let's say set selected user and this might have some users already selected right so I'll just say take all of the users that are already inside of it selected users I'll just spread them and I'll say add this user right after it then I'll say set search term to be empty because after we have selected our user we don't want anything inside of our input field right so we want to clear it and then set suggestion to empty to close our suggestions drop down also let me just um uh console log this right over here so that we can see what user is selected so I'll just go to console clear it up let's search J oh okay we're getting something let's click on this and yep if I expand this array we have this user selected if I search something else you can see we can scroll through this list as well let's select something and yep we have two users selected inside of our array great but there's one problem over here if I say t let's say you're going to see we get all of these results Terry medhurst and others right let's just select this Terry medhurst okay let's just type T again you see we get Terry medur again why is that we need to handle this right we don't want the same result and we don't want the user to select the same result again and again so for that we need to check what users are already inside of this uh array this set selected users array and then we need to compare it with our suggestions array with this selected users array to our suggestions array but see if you think about it this process might take a lot of time complexity so if I you know go on over here while rending these suggestions I'll have to compare every single time over here that if and I'll just say you know if this user dot some I'm I'm going to use some array function and I'll just search it inside of it every single time so for every User it's going to search that if this suggestion is inside of the selected users or not so we don't want to do that right we want something much more efficient so what we will do we will use something called set in JavaScript so set is going to act more like a cache over here so so we're just going to keep our IDs of the selected users inside of that set and the good thing about using a set data structure is that it cannot contain the duplicate value so even if we let's say somehow selected same user twice it's not going to add that same users ID twice inside of that set so yep that is why we are going to use that and these are some of the rare things that you get to know on my channel so hit that subscribe button right now if you want to see more such videos like this so I'll just create a used State over here called selected user set and I'm going to keep the default value as new set so this is going to create a new set over here cool and what I'll do when I'm selecting a user I'll just simply say set selected user set and I'm going to say new set and instead of it I'm going to take whatever that was inside of this selected user set so selected user set and I'll just add user. email and again email is something which is very unique to one user so I'll just add that over here and yeah this should do it let's see what what's the error we're getting oh we have added this if my bad cool now that we have our set in place what I'll simply do I'll just say after this return I'll say selected user set do has user. email so current users email is it inside of our selected user set and trust me this process is very fast it's not as slow as traversing an array so this is a very fast operation so it's quickly going to check does this have this users's email so I'll just say if it doesn't have not if it doesn't have it then do this else colon I'll just give this empty fragment that's all let's go on and check it so if I just refresh this real quick I'll I type T you see we're getting get all of this if I select Terry if I type T again you see we're not getting Terry so let's continue and render all of the pills on our input field so all of the pills are going to be rendered right over here so over here is where we're going to render our pills so I'm going to create a pill component which is not created yet obviously doesn't exist yet so I'll just create a new folder for our components and I'll create a new file over here called called pill. jsx so here I'll create a new component by typing RFC pill and if you don't know how I did that rafc I'm using this extension over here called es7 react Redux react native snippet so you can install that okay so this pill it's simply going to take a few things first of all it's going to take the image of the user we're going to create it very scalable so that we it can be used anywhere it's going to be taking a text and it's going to be taking an onclick function it's kind of a dumb component you can say it's not doing anything it's just taking or you can say it's a presentational component that it's just taking the uh props and just rendering it over here so instead of this spill I'll just say and this is going to be a span not a div because we want to render it in line so this is going to have an image with the SRC of simple image that we are providing it through the props alt tag is going to have the text and this text will be rendered right below this so I'll have a span tag and this will render the text over here just the class name for this span is going to be user pill for which we will add a style in just a minute and I'll just have the onclick and onclick function over here simple and yep that's it that is all we need to do let's copy this pill and render it over here inside of the curly braces I'll take the selected users not selected user set just the selected user I'll say dot map let's return this pill component right here and this pill will take a few things first of all let's just give it a key since we're doing map over here so key can be kept the same like user. email and below this oh also we're supposed to take the user from here and below this I'll just send it the image which is going to be user. image similar to the what we have written over here user. image and the name will be first name last name so it will take text to be instead of back text I'll just write this let's add a dollar sign over here to make it a template string and it will have an on click as well now what will this on click do it will basically remove the pill from our input field so this will be handle remove user and will take this current user and obviously this doesn't exist yet so let's just create const handle remove user it will take a user and we'll write that logic over here in just a second but let's see if our pill is rendered here or not yep we can see one of the pills has been rendered let's search something else but obviously this is not styled yet so yeah two of the pills have been rendered over here and our input have been shifted so let's just uh go on and style it so that it looks much better right below this I'll have user pill the parent class I'll just give it some height of 20 pixel some play Flex so that uh first the image comes and then the name align items should be Center so that we have it vertically aligned some gap between image and the text some background color color some padding some basic Styles over here and for the image I'm going to give height to be 100% so you're going to see yeah it looks much much better now and also let's have a x sign over here so what I'll simply do either you can add an icon or here you can just say and times so this basically will render an X so yep you see this will render an X over here so now let's go back and work on our handle remove user logic so inside of it it's going to be very straightforward we're just going to use filter so I'll say const updated users equals selected users do filter and inside this we're going to filter it out so I'll just say selected user selected user. ID is not equal to user. ID so let's see what I have done so whatever selected users were already there we're just taking the current user that we supposed to remove and we're comparing if the ID is not equal to that users's ID only then return it else remove it from our array and so this will return us array over here and I'm just going to say set selected users to this updated users also we're supposed to remove it from our set as well so I'll just say const updated let's say we're storing emails right so updated emails equals new set and inside of it I'll say selected user set so basically over here I'm creating a copy of this set and I'll say user emails sorry updated emails. delete see it's very straightforward working with a set so we just say do delete and we're going to say user. email so it will delete that and and then we're going to update so set selected user set to our updated emails and this should do it let's go on and see let's click on this and yep it's getting deleted let's try to render some other user if I select this okay it's getting deleted let's just try to add more users over here and you can see it's wrapping our input field below this so if I just keep on adding more and more users so yep you see it's working as it's supposed to work awesome now there's one more thing if I let's say we are selecting a user over here right let's say if I selected this Jerry I want the input to immediately appear right over here I don't want to go and click over here and then type start typing again right it's not a good user experience so let's just work on that how we can bring it back to the focus so simply over here I'll just create a use ref hook so use ref I'll just keep it as null by default and I'll just say const input ref okay let's just take this input ref and assign it to our input component so I'll say ref equals input ref now we have access to our input component and simply what we have to do when we are selecting our user this user I'm just going to say input ref dot Focus sorry dot current dot focus and that's it that is all we need to do let's go and check it out if I say anything D Hill yep you see we have already focused on this all right now the final task that remains is to press backspace to remove these pills if I press just backspace once it will remove this if I press again it will move that one as well okay so simply inside of our input field I'm going to have on key down so whenever we press a key this will be fired off and we will create a function called handle key down which doesn't exist yet so let's create it const handle key down this will take a event and I'll say if e do key if key is equals to backspace and there's nothing inside of our input field so I'll just say e. target. value is empty and selected users. length is more than zero only then we will do this what we will do we'll say const last user simply we will do this so we're just removing one of the users from over here right so I'll just take the last user and remove it from here here so selected users and I'll take the last user so selected users do length minus one and we're doing this handle remove user right so we're just going to call that again over here so handle remove user and last user and we'll set the suggestions to empty and yeah this should do it let's see let's try it out if I press backspace yep it's removing our pills so awesome this is a great UI now one more thing that you might be thinking is let's say if I add a user over here let's say if I search Terry I should not use our my mouse over here right I should press the down arrow key in my keyboard and it should just navigate throughout this uh suggestions right so this is the homework for you try to do it yourself first if you're not able to do it I have uploaded a reel on this particular topic on my Instagram so you can go to Instagram and search Road side coder and I have pinned that reel on my profile so you can go and check it out I've explained the process how you can do that one more homework for you is let's say if we typing a lot of keys uh like a lot of uh inputs over here right so if I just remove this if I say t e r r y so you see I typed five characters and it made five API calls this is not at all optimized we should use debouncing over here so that whenever users stop typing let's say for half a second or one second only then we should make an API call this is the standard protocol that we follow in the companies right so I've created a complete debouncing and throttling video as well so you can click this card above my head to watch that complete debouncing video and if you're interested to watch more such reactjs TV questions video you can click this card over here and watch that complete playlist

Channel: RoadsideCoder

Views: 21,728

Keywords: multi select input react, search bar react, typeahead react, search in react js, react interview, react interview questions and answers, react interview questions, frontend interview questions, javascript interview questions and answers, javascript interview questions, javascript interview, reactjs interview questions, reactjs interview, namaste react, namaste javascript, react interview question for experienced, react SDE2 interview, react login tutorial, Odin school

Id: AsvybgZTryo

Length: 28min 48sec (1728 seconds)

Published: Sun Jan 28 2024