REAL React Interview Questions - Live Coding

so i've noticed over the past couple years of doing this channel that there is a hunger out there for interview questions and a few weeks ago as part of my whole being a freelance developer thing i did a live interview for one of the big freelancing platforms as part of this interview i had 15 minutes to build features in a react app real time and i thought it was a really interesting exercise and actually ended up being pretty fun so with that in mind i wanted to make a video to take you through something like a real life white boarding problem and how i solved it if you're interested in the code i've got it for free on gumroad so visit the link below and if you just put your email in i'll send you a zip file with both the problem and my solution let's go ahead and get into it all right hey everyone we are back as i mentioned in the intro this is a real react coding challenge that i got in an interview process so i wanted to go ahead and show you how i would solve it in real life when i did it i think i only had 15 minutes but i couldn't quite remember so i'm going to go with 10 so i'm going to go ahead and start the clock and then show you what we're working with so let's go ahead and get started okay so basically what we've got here is a react app it's already running and basically i'm just going to get out of package lock so we are only going to be in these two files which are this login form and some utils so basically this is our task we have an incomplete login form so we see our guidelines here we're not allowed to add any html into this component or use refs and so we have a list of tasks here so basically what we're working with is this email password login so when you hit login it should trigger the login action the button should be disabled if the email is blank or if the password's under six letters or if the action is being performed so the login and then we want to show an error message and show an alert if the login succeeds so we need to look at the login function as well to figure out how it works so i'm going to go ahead and get started here i've already brought in use state from react so i'm going to go ahead and use that for handling the email and password so let's go ahead and do that so what we want to do is have basically password uh and then set password and we're going to use an empty string for that essentially we've got password we also want email maybe it would have made sense to start with email so we're going to do that and then we're going to set email so that's all well and good we also want those values to be on these inputs so these are going to be controlled inputs so that's all well and good and that will allow us to grab these values set these values and all that kind of thing we'll start with password here and then we also want to do the same with email sorry if you can hear my fan i think this is taking up a little bit more ram than i expected to record the screen so we've got that that's all well and good and then we've also what we want to do is we want these to update so what we're basically saying is at first i just want to capture these values so in order to pass these values of email and password to this login function i first need for them to be set um so what i'm doing here is just um setting up a basic structure for setting the values and getting the values so now that we have that here with use state which if you're not familiar takes the place of kind of set state from class components basically what i want to do here is i want to have an on change and i want the event to be passed and then i want to set email to event.target.value so whatever is being typed is what's going to be set and then i also want to do the same here for password so instead of set email we'll set password so that's all well and good and so in theory these should be being set now so what we want to do after that is i think work on the login function so what i'm going to do is write a function called handle login it's going to be an async function because we know in real life that would usually require a call to a server so i'm going to go ahead and write that and basically what we want to do because we know this is going to be an async call and i can tell you that by this login action looking at this it's basically kind of faking asynchrony with this promise here so in real life like i said you'd call to a server but here we're just trying to replicate that functionality so we can see we we have a randomly generated delay we can see that it wants email and password but it wants them in an object so that's interesting and then we have this promise we're checking password so we the correct password is one two three we want email to exist and if those both aren't true then we're going to get an error so when we investigate we can see that i'm skipping ahead a little bit because that's kind of the last um step here it says investigate the login function to find out how to log in but since i've done this before i know a little bit this might not be the exact same order you would do it if you were in an interview so we got about five minutes left so i need to hurry um but i just wanted to call that out so what we're going to do here is have a try catch if you're not familiar this is just a way of handling kind of failing promises and that kind of thing we know that we're going to need an error as well so basically i'm going to say error set error and then that can be empty string and then we know from reading the instructions while the action is being performed we need a way to track that so i'm going to do basically the same thing but with a loading variable so i'm going to say loading and then set loading and of course to start it'll be false okay so now that we have everything we need we can come here we want this handle login to fire when we click this button so i'm just going to say on click handle login and then in theory that should work you notice i'm not checking anything yet um so that's probably something you'd be doing along the way is just making sure everything fires as you expect so um we'll just pull up the console here make sure we're not doing anything too crazy so um you know uh whatever you know uh my email seems fine right we're not getting errors in the console yet so um i'll go ahead and clear that actually and we'll leave this here for later on um so i'm gonna come back let's look at how we're doing on time three minutes so gotta hurry okay so we know here that basically what we wanna do is to use this login and we want to pass as an object so we're going to await login because we know that this is an asynchronous call right so and we want to pass let's see email and password so we're going to pass it in exactly the way that it wants and an object and then if we catch the error down here what we want to do is set error to whatever the error message is and then we can come back up here uh that we want to show the error message if it fails it should be cleared every time the user re-attempts to log in so what i'm going to do is at the top just set error to null every time we click that button there's probably other ways to do this but i think that's a pretty solid way of doing it and then it says that we also want to um basically show this error message i'm trying to see where that is show an error message if the login fails and so if we scroll down here we can see this is where the error message should go only if there are login errors right so basically we know that we have this variable error so i'm just going to put it right there that's from right here and then we also know basically we want uh to do a check for if email is blank or if password's under six letters or if it's loading right so basically uh we can say you know disable button is either you know there's no email or password the the password length right is less than six or if the loading is true uh so basically what we'll want to do is we'll want to uh set loading to true at the beginning and then regardless we want to set loading to false here and if that succeeds we still want to set it to false if the login succeeds and then we also know that we have to set an alert if the login succeeds so basically we can say alert login successful so that's all well and good we have about a minute left so i think that's everything we need to do so let's read back through this again we should log in pass the data to it uh disable the button if it's blank or if password is under six letters um or if it's loading uh show an error message if it fails and clear it every time the user attempts to log in so we're doing that setting your to null and then alert if it succeeds and figure out how to log in successfully so if we go back to the code over here then we should be able to see i would expect this to be um oh we haven't used we haven't set disable button anywhere so disabled will be true if disabled button is true which it should be so we can see now it's grayed out so basically peter peter.com but we also need a password that's over six in length so one two three four five on six so let me make sure it's less than six under six so that seems to be working and then we also know based on this that we want password to be password one two three so i'm going to say clear pass word one two three and then log in and then login is successful you can see there was a delay so it's kind of like fake asynchrony and then let's do an error so password one two log in oh quick error there um so let's see what is going on here um you can see our timer's up so i'm going to go ahead and stop things i think we're pretty close that was pretty good and i'm pretty sure i had 15 minutes in real life but let's look at this peter.com pass word one two log in the same thing happened again so let's see what's actually going on here so if you meant to render a collection of children use an array catch error set error so i think what we need to do is i think what's happening we need to figure out what the error actually looks like because i think it might be error.message but let's go ahead and console.log this error and we'll say peter peter.com my password and the error actually looks like error dot so i think what we need is actually error.message so errors come back when you throw the native error here as an object so we actually need error.message so let's see if that actually helps things and we'll say my pass and there it is nice and red okay so slight error on my part but we did it in about 10 minutes i've got 12 15 here on the loom recording so anyway i hope this is helpful i think this is a pretty good exercise i honestly wish i'd come up with it i think it's a great little interview thing to see how someone works under pressure and someone's problem solving skills and also get a sense for what their sense of react is i had to go pretty fast i'm pretty sure when i did this the first time it was 15 minutes but i like a little challenge and yeah like i said in the intro you can find both the starter code and my solution uh at the link below so uh that will take you to a road page where all you have to do is just tell us where to send it to you and you'll get a nice zip of both of those repos so again hope you find this helpful and i will see you in the next video thanks [Music] you

Channel: Peter Elbaum

Views: 66,955

Keywords:

Id: H20LG9TXDKQ

Length: 13min 2sec (782 seconds)

Published: Tue Mar 01 2022