React Junior Developer Interview (Questions & Challenge)

what's up guys ter cin here today I'm with my good friend bdan and we are going to be doing a real world react interview bdan is a mid-level developer and this interview is a mock interview so it's not actually for a real job but let's pretend that it is and it's going to be for a job that will require somewhere around like one or two years of react experience which bodan has more than that so the way this interview is going to work is as you can see on the screen right now we have the

questions that I'm going to ask bdan so the first part will be basically what I want this to be and this is also for you bug done this is going to be a conversation there's no pressure there's no pressure to like get every answer correctly I just want to talk about react and I want to see how you essentially think about react how you understand react and how you like to work with react and I have a bunch of questions here will go through them I may skip some questions just based off time and whatnot

and I may add questions spontaneously because I really want this to be a conversation and I want this to just full naturally so again book done no pressure you don't have to get all of these right just do your best let's talk about react and let's just enjoy react because we're both react developers and we really enjoy react and then the second part of the interview is going to be a little coding exercise and this one is going to be simple we're just going to have you build a simple sort of component do some things

to it and it's not going to be anything too fancy and again I just want to see how you work with react how you think about react and I will ask you some questions about why you're doing certain things and just to see how your mind works and how you approach building react to see if you would be a good fit to work at cause and solutions because let's assume that this is for cause and solutions cool so bdan welcome to the interview are you ready yeah sounds great glad to be here man glad to

have you here and again big shout out to bdan for doing this I needed somebody to do an interview and bdan was ready to do it so much appreciate it um let's get into it cool so let's start the conversation about react and let's just start small and let's talk about react so my first question to you bdan is this is a really simple one what is react and how can you best describe it well that's uh that's a really kind of controversial qu question depending on who you ask I guess because a lot of

people see it as like a framework or like a library and whatnot so the opinion is always kind of divided in the react Community uh I see it more like like a library sorts right for for JavaScript to create UI interfaces mhm and so you would describe it as yeah okay fair enough so as a library to build user interfaces so then something like nextjs would be more of like a framework right yeah yeah yeah exactly yeah okay yeah fair enough fair enough and then so react right it does things a little bit differently right

so you're not directly uh working with HTML and CSS although yes you are with CSS but like you're not directly working and rendering I mean you are but when you're coding it you're not so usually in react you code with jsx right that is a kind of a thing that we do so my next question to you is what is jsx uh jsx is essentially the kind of like the templating language for react right so yeah kind of like you have it in I guess backend applications right where they use templating languages you have the

same in react where you can basically insert Javas script inside of HTML which is kind of like its own thing called GSX yeah and like what are some of the the the benefits of like having jsx and having the ability to like put Javascript in HTML like why was jsx initially kind of created um that I'm not really sure of but I I really enjoy working in jsx because of like having the option of using JavaScript inside essentially HTML and uh yeah having uh some of the flexibility there yeah fair enough so um the the

reason why and I'm going to mention this because I I really like it so like back in the early days when react was initially like developed they weren't using jsx they were like using Straight Up functions like H1s divs and whatnot and the way that you would write that you it would be ugly and you would get easily lost right so like what they wanted to do to make this more accessible to developers is give them something that is familiar to them but at the same time allows you to do all of this JavaScript right

which is how jsx was born it's like okay let's make it look and feel like HTML but let's also allow you to put Javascript Insight so you get the best of both RS you get all of the reactivity from react but you still you know you can work with it almost like HTML sure we have like class versus class name and some of these other properties that are different but essentially anyone one that kind of knows HTML and jsx and JavaScript can easily with just a little bit of learning can like contribute and learn GSX

and pick it up quite easily so that's I think they did a good job on that yeah cool so uh another thing about react is it does something differently where it doesn't directly kind of I mean I'm answering the question now but like I think I know where it's going yes of course it's your typical react question that is kind of the standard to ask in an interview but essentially you have this concept of like the virtual Dum right yeah so if you can explain what the virtual Dom is and how react uses it to

work with it uh I have like a basic understanding of the V virtual Dom so it's uh from how I understand it is basically react doesn't interact with the real Dom right it has like the virtual Dom and then once the things kind of like are set in stone and everything's kind of done it then injects everything into the real Dome so that's how uh I got my understanding of the virtual Dome and then yeah on the reeners it like checks the references of uh certain functions and whatnot and objects and then uh yeah just

renders it out that's that's exactly it right so the virtual Dom is is is a tool that react uses to kind of see okay what changed right it has a visual so the virtual D specifically is like a ual representation of the document object model if anyone doesn't know what Dom is is the document object model it's basically what you see on the browser right whatever the browser renders you have a bunch of objects and stuff in it that's the document object model and react has a virtual layer in between where it uses this to

sort of um see okay you changed some piece of State in your application what results does that cause in the virtual Dom first and how does that differ from the Dom so that it can then go and make efficient updates it's one of the reasons why like uh the one of the reasons why it was created was that so that react can make updates more efficiently right and actually one question that I do want to talk about because this is a topic that I was interested in recently what would be some of like or at

least one of like the disadvantage of doing of having a virtual Dom um so the first one that pops into my mind is maybe performance mhm right I think it's uh yeah if you have computational heavy tasks that you need to do on the front end which is kind of like I don't know not really a thing that should be done on the front end but if you do I think it can uh affect the performance a lot but uh yeah I think yeah so exactly so performance is a thing and it's basically that uh

one of the disadvantages of it is that everything in react has to go through the virtual Dom right which if you have a lot of stuff right there can be some performance implications and the reason why I mentioned this question is recently I was looking at like signals which is a different concept completely unrelated to react but signals at least in the way that I currently understand them they allow you to sort of bypass the virtual Dom and manipulate directly uh HTML the Dom like HTML elements right so you can have a signal it doesn't

necessar at all actually have to be even in the component and it kind of bypasses this whole thing of react and the reason why I was interested in this is that this came out this came out as a result of like some of the disadvantages of the virtual Dom so it was just interesting to think about like there's a different way that you can do things and that's not how react was sort of designed to work with at all that's why I mentioned it cool let's um yeah let's quickly do this one what is the

difference between controlled and uncontrolled components or inputs actually I think I should put inputs here controlled and uncontrolled inputs oh you got me there I think I yeah I think I think I cannot answer that question if I tell you um uh you have an input text input and then you can either get the value by state or you can get the value directly from the HTML element without State mhm bring B uh no not really cool fair enough we'll skip this one no worries just for your own information controlled inputs is when you have

a piece of state and then you use the value from the state to the input and then on change you change the value uncontrolled is when you have no State and whenever you want to access the value of the input you just get it by the ref I think of the input so you just get the value directly without stick right cuz inputs will have a value right but if you control them then you control the actual state that uh that the input has so you can do things with it yeah okay cool thanks there

you go so again this is a conversation right I just want to see how you are thinking about react so no worries about anything what are some of the hooks commonly Ed in react so this is really like the most common basic building block hooks of react so uh the one that I used a lot and still use a lot is basically the use effect hook right if you are working with data and you need to fetch data you don't get around not using it um yeah and uh I think use memo as well for

just uh yeah performance I guess and uh making sure that uh renders uh do not happen unnecessarily and yeah use collect not so much I think uh yeah I think use effect and use memo are kind of like the essential hooks right that you kind of learn when you're like starting out um when I started out there was like class based components and stuff like that so yeah yeah the good the the old days I I was going to say the good old days but not necessarily no the old days yeah the old days and

yeah I actually yeah go on go on no that's it um you touched on something that is uh uh the point of a lot of debate which is use effects man and fetching data um so generally now um you shouldn't really use a use effect to fetch data even though to fetch data you would need a use effect for the simple reason that fetching data is a whole process and there's so many things that you need to think about and handle like aboard controllers race conditions loading States error states that it's kind of just easier

to default to a library that does this already like react query but that's kind of usual the recommendation but you do have a point where like even if you use react query like you need to know and understand about use effect because if you for some reason have to build it yourself or or even have to like work with use effect in a different way you need to understand the life cycle of use effect so it's really really important so like all of the debate that's happening like I get it but like you still need

to learn about use effect and use effect is still a very valuable hook to use in um in a react application yeah cool so you mentioned use memo so I won't uh ask about that you mentioned use callback um I use use memo and use callback um not too too often but like specific instances where I need to for example use memo as you said to prevent unnecessary renders but use callback as well sometimes I need to like pass a function to a use effect and I don't want that function to re-trigger infinitely use effect

I'll wrap it in call back or if I'm passing that function to a component that I don't want to render unnecessarily I'll also use use callback cool one thing we haven't mentioned is UST state but I think that's pretty self-explanatory I hope that everyone here knows what UST state is so what I will ask you is I won't ask you about UST State directly I'll ask you what is use ref and how does it work and more importantly how does it differ from UST State uh I actually uh never really like touched us ref like

in any yeah in any like I never had to or I think I never had to really Implement like refs okay so I always defaulted to UST State and yeah but yeah UST state is also hook but somehow I missed that that one out it was I don't know somehow you stay it's just it doesn't feel like a hook right it's just you always you I don't know it's just you stay yeah it feels like a value right give a value right but like you you get returned like the value and the updat function which

yeah it does it's kind of part of your variable right it's like it's just it's just a variable at this point right that doesn't feel like a hook but yeah yeah it's a hook so I I'm surprised that you never used use ref because uh if you work with like thirdparty libraries or stuff like you sometimes need to give them a ref to access some of the functionalities of the library right like they'll usually expose some functions and then you can do that or like have you never even like had to focus an input right

like let's say on Mount you have a form and you want to focus the whatever the first input you would use a ref for that to like call the focus method on it right so you never did any of those uh I don't think I use refs for that yeah I what would you use um I think cuz as far as I know that's the only way to like Focus an input really is wasn't wasn't there like some values that you can pass in like mui and stuff like that oh if you use mui yes

they will use ref under the hood yeah fair enough fair enough okay that's why I never I think I never directly touched it but maybe through like mui used it under the hook but fair enough fair enough uh one of the things that I do want to mention is there is a difference between use State and use ref so use ref kind of functions almost in the same way as you state you can store values in it so you can store like your count if you have a counter application or whatever the only difference is

that whatever you store in use ref is nonreactive which means that it will not trigger a reinder of the component oh yeah so if you store a value and you kind of um you update it it it won't be re reender your component which means that if you use this value in the return body you're going to get an outdated value yeah but at the same time this means that in a function you can assign a new value to a ref and then on the next line directly access that new value right Mak sense which

would State you can't you have to wait for a whole new reinder right there you go cool um what is O this is nice what is context and how does it work o uh context is interesting I think I only only used it once uh so basically um uh use context uh gives you the ability to access state from uh essentially the top level uh component right so you basically Define it at the very top level and then you can kind of set the state at the top level and then all of your child components

would have access to that top level top level state which uh essentially helps when you have to access the state from multiple child components without like using something called uh prop drilling beautiful and uh since you mentioned it what are some of the issues with prop drilling like why do we not want to do prop dring uh it can get ugly pretty quick very very yeah and it's kind of annoying just dragging uh the state all the way I don't know through four or five components all the way down it's just yeah it's it can

get messy and then you need to rename something you have to rename all of them or even worse you decide this component that's in the middle of the chain no longer should be there should be somewhere else what do you do yeah you broke the chain right yeah there you go so context yes is great to to to do that perfect um actually on context can you give me like one use case for a context like when would it make sense to have a context and this one I know that you've worked with it really

yeah yeah just think of mui and things like that mui or any Library man is it are you talking about dark mode yes there you go okay dark mode right it's a global thing that should be uh accessible in your entire application and it should also be updatable from any component if you want to have a component in your settings menu that updates dark mode you can just do it you want to have a component in like your Navar that also does it they all can access the same context and make the update so dark

mode is like your typical solution for that good yeah cool let's talk a bit about um State Management so since we're talking about context what is State Management in react and when is it useful uh are you referring to any of the State Management libraries by any chance that is my follow-up question yes okay because I actually never used those really yeah I I uh I don't know interest oh fair enough I really I didn't really need to in the use cases that I've worked in and if we had to I would have picked up

like I don't know moex or Redux and whatnot but uh for the for the applications that I worked on we never really defaulted to to estate uh management Library that's a very valid answer and yeah the truth is not all applications need it and you can very much build a big and complex application without State Management cuz that really comes in useful when you have like specific features uh that you need to implement and you need to have like a a more robust Global state that context like wouldn't cut it you know like you need

something more proper cool now uh let's move on we have like a few questions left so you're almost done so you're doing really great um let's just talk a bit more about react and these are some more like open-ended questions um what is the recommended way to structure your react code so here I'm thinking about components uh the code that goes into the components and how other components use components right like what's kind of the the recommended way to approach that um I guess there's uh so are you talking about like the folder structure or

like the components itself folder structure falls into it but it's not specifically the folder structure but that's a part of it yes okay yeah you probably would have uh you probably would break down like the views from your components right so you would uh have a components folder maybe uh a hooks folder for your uh custom hooks or uh some other hooks that uh you use a lot throughout different components um yeah and then uh probably break down the components into maybe something called dumb components right that just renders things out and then maybe more

complex components that handle the logic and stuff like that or using those custom HS that you defined inside the the the hook folder right um yeah those kind of the the first things that pop up into my mind yeah and what's like why would you say that it's recommended like it must be for a good reason right like what would be that that reason I think separation of concerns is uh pretty nice and uh it makes uh yeah it's nice to work in the neat structured application where you don't have to browse through all the

files to just uh find that one specific hook that you need to use in another component right so I think it makes uh the code maintainable and uh easier to read and easier to work with and also easier to onboard as well because yeah because yeah you need to onboard people and if you are new to a new project and you have to look through a bunch of different files to find that one function that you actually need yeah can't get frustrated really quick quick yeah and you end up spending like a week or plus

to like just figure out and then you feel like you feel the impostor syndrome that like you don't understand what's going on and it's a whole mess absolutely yes so one of the for me the telltale signs of a good react project is if I can get into the project fresh without knowing anything about it and if I can immediately spot patterns and I can predict where things are going to be and just by like even the naming of the file of the components I know that like this does this and then it just makes

it easy because I need to if I need to add a new feature I can immediately do it and I can follow the pattern I don't have to ask myself questions like why is this done this way here why is it done this other way here which way do I use right so yeah that's that's really really really important cool um actually that's a good good Segway one of the other kind of um benefits of having that uh that proper structure of like components is like it makes it easier to test components as well right

if everything is like separated in their own file and component you can easily test them right so now my question is what is a good way to test your react applications um so I don't really I didn't really test components um in the past when I was working in a application we were only using Cypress for like end to end tests yeah to basically see that everything's being rendered properly the data's uh there and stuff like that and yeah yeah if you change something that if you test break you know that the code that you

introduced might have had some breaking changes good I'm happy that you mentioned that because that is uh one of the the the main reasons why like you write test in the first place is not only to validate that your code is working currently but that whatever changes you make in the future does not break your code and you have like absolute certainty that if you designed your tests correctly you can rely on them and like you if you ship code and your test all passed then you can be reasonably confident that you did not break

anything so that's a huge value and yes there is a difference between so you mentioned end to end to end test that's like integration test where you basically um I mean if you can just quickly describe Cypress kind of how it is and what it does uh yeah so basically Cypress um it's like its own application some sort right you run it and then you have your test files and then you can run your test files and then it runs a browser window and then it runs through all of your application and then based on

the code uh that you wrote inside the test it will check the values inside your Dom and see if those values match with the ones that you defined in the test and then it will pass or not yes that's completely correct I just want to add to that that um it tests and it goes through your application as a user would yeah so with an actual user interface and it actually clicks and types and does all the things the user would so that you can get to see it like okay how does my app really

behave right so that's Cypress and then there's the other side of it which if you haven't worked on that's fine I also haven't worked on it too much but there's like this whole like unit testing where you actually test individual components and you make sure that those components uh behave exactly in the same way that whenever for example you have a button with an onclick uh function that you can pass that whenever that button like this click that it actually does call that function and nothing else right so this is similar to like how you

would do it in another language or another framework or Library like when you would like actually want to unit test your piece of code so there's also that side of it but for what it's worth you are right uh it isn't as common as end to end tests and usually in a lot of projects we haven't even done that testing because it's a bit redundant and you cover enough with end to end test that like it makes this like sort of acceptable but there are use cases for it definitely cool last question we're uh we're

right on time so last question uh easy one what are the react Dev tools and what can you use them for um I know there is one uh death tool for like this uh Chrome extension right that's the one I'm talking about yeah um I used it basically to see the component Tre right when uh stuff is being rendered to the screen and then if I have some like errors and weird Behavior I just try and Trace the component Tre and see where some of those weird behaviors were happening and what else uh uh what

else would you see there I'm asking because there's one word that I'm looking for from you okay okay like like when do you go and look at the react Dev tools like what's wrong in your application that makes you go and look there usually I haven't used the the death react death tools for a while so fair enough I I have no idea performance right okay something's wrong in your app it doesn't perform as you expected to or as fast as you wanted to and you have no idea why open up the dev tools look

at all the components look at how long each one takes to render look at how many times each component is rendering and then you also get to see uh that the reasons why it rendered like what caused it to render right like a very basic kind of overview and then when you make a change and you fix it you can valid validate that the the the the the recording cuz you can record like your performance the profiling that it significantly changed and then you can validate that your uh fix has been implemented yeah cool so

that was it for the questions uh thank you very much ban I really enjoyed this and I hope that it didn't feel I hope that it felt like a conversation and not like a like a drill you know yeah it felt great good good um now what we're going to do is we are going to move on to the second part of the interview which is the coding exercise all right cool so now the questions are done let's begin the second part of the interview so this one is going to be a technical interview it's

just a little code challenge that we're going to have to do and these are the instructions So currently for all of you watching Bogdan is on my vs code we're using the live share extension and I have the app running here on my machine this is the app react interview and whatever changes bookan is going to make to the code will automatically be saved in this file and then my terminal is going to pick it up and it's going to run the app so we're going to be able to see what bookan is doing so

that you guys also get to see what bookan is doing cool so this is uh the challenge so we have some instructions here at the top which is create a simple react application that displays a list of countries and their capitals the application should have the following features so the list of countries and capitals should be fetched from an API the list should be displayed in the countries page so this is the component that we have here right we're going to have to fill this up with the countries each country should be displayed in a

separate component and then we want to add some interactivity to this the user should be able to filter the list by Capital right so super simple stuff what we have here is we have this select input from the component slui folder you're going to want to use this whenever you do the filters it's a pre-built component that just does all the things basically it's like a select input but like easier to use this than to just do it manually with HTML you have the base URL here this is just a public API rest countries. comom

version 3.1 so this is what you're going to use to fetch um yes to filter by Capital City you need to use the/ capital and then give the capital here this is the endpoint right so you're going to need to provide the capital here to this endpoint to be able to filter by capital and actually I need to do something here to to fetch all uh cities countries use the all endpoint so to fetch all of them you need to use the all endpoint I forgot to add this then we have here a list of

filterable capitals right so I just let chat GPT kind of do the work for me so these are the ones we can filter by in no order just this if you're dissatisfied with the selection here blame it on chat GPT not me then you have uh just a helper function here for the type of the filterable capitals this I assume will come in handy and then you also have a useful interface here for the country so we are working in typescript and uh then you have the actual component so ban I will leave it up

to you the only thing that I ask from you is to just walk me through your thought process how you're thinking about this how you're approaching this and then why you're doing the things that you're doing so without further Ado go for it good luck okay great thanks okay uh the list of countries and capitals should be fetched okay so we probably need uh a state for our countries oops [Music] uh is it going to return an array probably let's just go with that for now engine c um it's going to be an country oh

I'm try to import it I may need to import it for you if it doesn't work does it yeah yeah yeah could you import it for me done okay great uh okay then uh probably the same with use effect yep you got it yeah thanks a bunch uh okay and just basic boiler plate for use effect right and then and we going to have our uh function fetch data and then we going to fetch right I no [Music] [Music] m fetch um and the end point is SL all SL all correct that's for all of

them yes okay so uh we might need some back tis right for the template um so we have the base URL /all and then we're going to uh have are H set the countries to the data maybe we need to pass it as Json you do whenever using fetch you do okay um so const part data data. Json and then we have par data oops okay so if you can just explain a bit what it is you're doing trying to do um I'm trying to uh fetch the data from the URL and then par it

as Json and then set the state uh yeah so you're definitely on the right track uh let me give you a little bit of hint first of all is this a synchronous or asynchronous function it I think it should be asynchronous oops yeah should be a synchronous mhm and then we have to wait for the response and then probably wait for the parsing why is giving me an error parse Json maybe mm um uh lowercase that that's it you have the right IDE just lower case okay never mind okay uh and then we need to

call it inside here fetch data so why did you define your function inside of the use effect um and not outside because if we Define it outside we need to pass it to the dependency array probably and then it would trigger like the reender MH right it would cause an infinite Loop yes it would yeah good that's the reason and also if you want to use async uh you need a function to be able to await stuff you can't await stuff directly in a use effect so you also that's one of the reasons yeah and

then we we probably need need a new component right the for the country so one of the requirements was that each country should be displayed in a separate component okay so first let us display the list of the countries maybe we can just uh check if the countries are actually being fetched mhm uh but then I have I guess you have to I will check and I will tell you help me out I check and I will tell you so I'm going to refresh open up the console so yes they are available you have a

total of 250 countries returned so initially um starts off at zero and then you have 250 and it's an array of object it's an array yes and every object has all of the properties is uh way more than you need and the ones that I typed in the helper type here the country are the only ones that you need for this exercise so I can validate your code works so good job good that's the right idea you did everything perfect yeah thanks okay and then uh I guess the next step would be rendering it out

right the list should be displayed so we can uh I guess I will just do it in another [Music] diff [Music] that something is not right yeah you have the right idea but something's not right and if I can even say it literally something is not right like it's not on the right like literally something is not under you have left and you have right something something is not right and consequently something is not left ah wait wait what there you go there you go there you go element first then index always okay okay okay

makes [Music] sense um I guess that should work if you can just also add the capital because do you have it in your type there you can literally just add it right next to it but we need to also show the capital okay uh just I guess comma separate works as well country. capital okay great so let's look at the application and I can validate that all of your countries are currently visible on the screen if I open up my console you also have let me just clear it and refresh you also have no errors

which is great good job there's one thing that I do want to mention uh if you can explain why you used the index as a key uh because I know that react complains if you don't but uh the reason for that is that uh react can actually make sense of all the different uh paragraphs that are being rendered and uh identify it with a unique uh value so if you have to change it react knows which one it is it going to change that's totally fair that's what keys are for but specifically why the index

I mean it's pretty unique because it's counting from I think zero to how many elements there are inside the the array that we have right now so that's the easiest to use right now what happens if the um countries change let's say say you filter them and then they the index is no longer match because you have initially a list of 250 and then you filter them to have I don't know 50 and now all of the ones that had their index based off of 250 might some of them might still show up in the

shorter array but now all of their indexes are all of their keys are different essentially because the index is different oh right yeah so then what react is going to do then it's going to not know which ones are the same which ones are different because all indexes are different it's going to completely destroy all of them and then rebuild it which defeats the whole purpose of having a key and literally is only there to silence the react warning which you shouldn't but here's the thing there's an easy fix right is there something else that

is unique that you could use uh I guess the name of course or the capital are any two countries going to have the same name probably not yeah or the country and the capital together sure if you want to go in that but you can just do the name I think it's fine with the name okay should I change it absolutely we want to do good okay um so it's inside country. name. common right and then we don't need the index anymore beautiful removing code is beautiful nice great um now so the requirement was that

each country should be displayed in a separate component uh yes so now so that should be very easy to do yeah that's uh very trivial I guess uh we just create a new component called uh country I guess just keep it simple um yes I would maybe call it uh country like country card just because you have country at the top and I don't think it it interferes because one's a type one's a value but um again back to our conversation about like you come into a project and you look at a component you need

to know what it what it is if it's just country you're like okay country what if it's country card then it's like okay this is a UI UI component for the country right yeah okay makes sense um and then we going to return exactly uh the stuff that we have here [Music] mhm and then we going to pass the country oh uh country you probably need to type it right mhm country still complaining uh okay do you want a hint uh yeah sure uh so on the right you've typed it as country but on the

left you're giving it an object with a country property so there's a mismatch okay can say you're saying it's a country but you're giving it an object with a country inside do I need a separate interface for that you could generally easier to make a separate interface yeah usually in react all components uh that receive props have their own interfaces which is the name of the component plus [Music] props exactly and then I have country and then I have this inside the country know yes but is there not an easy way easier way for you

to do that for you to get the same type oh is it just country yeah there you go okay and now there you go country props country card props [Music] yeah okay and now [Music] can country card and then we have country equals country and then that should work I guess let's see so I'm refreshing and yes it works your countries are rendered good job but there is an error in the console each child in a list should have a unique key prop okay oh there oh was it oh country name.om okay there you go

let's see let's refresh your data is loaded and there's no more errors in the console great good job perfect cool so now the last thing the user should be able to filter the list by Capital so what I'm going to do to injust it in the interest of time I am going to show you the API of uh the select input and then you can just fill in the rest so what I'm going to do is I'm just going to instead of react interview actually oh what happened oh no did I lose okay thank God

I thought I lost your changes okay I'm going to create a new div I'm going to do select and then here select dot no no no no no option and then this is how your API looks so you have this select here and then you have select. option your select will be will accept on change we'll accept an onchange function which will pass it the actual value here it's going to be of typ string right so I'll leave it up to you okay um the user should be able to filter the list by capital okay

so we need an on change yeah it's kind of hard without seeing the UI and what it does I guess the UI is complete trash so it's worth seeing on yeah there's zero stylings applied you have a select So it's b your typical HTML select input you can select multiple options that's all that you need to to be concerned of and there's only ever going to be one active option which is the one you're filtering by so it's just so so if you fil can you only filter by one value yes okay yes cut it

um and then we probably need those capitals those are the options that we can filter by that's it y okay and the option is all H forget that that was just so you can see the API I'm going to comment this out okay okay um actually let me just help you out here we can do placeholder this will handle the the there's a placeholder there so you don't need to worry about all yeah okay it's kind of fun because like I have to visualize how that's the beauty of YouTube man there's not only you and

me there's a whole audience watching hope you guys are enjoying this if you are subscribed okay let's go um okay onchange what should that onchange do so let me give you hint in the interest of time you need a new state variable uh do I need filtered objects like filtered countries no you can use countries but like what's the one variable that's going to now determine how the countries change so the requirement is the user should be able to filter the list by Capital mhm so what is the element that will determine what countries are

shown the capital yes so would it make sense to have a state for that yes yes it does I'm just trying to wrap my head around the the use case I guess uh guess I'm going to use string for now or do you want me to properly type it I um so you can have no currently selected Capital which will show all of the countries and you can also have a selected Capital which will then filter them okay uh what I would do is I would just use the type in New State just like you

did with country you also have a type for cap capital uh you oh you yeah you def 929 okay yeah so this will make sure that this state variable can only ever be used with one of the values that Capital has okay cool that's great you're missing two things [Music] okay I need to render out the options I guess right mhm yeah that's three things sorry yeah yeah uh yeah so I guess let's just render out the options for now uh filterable capitals set [Music] yeah um yes let me just tell you you can go

to the definition but let me tell you the API um they just take in a value so every option just takes in a value that's it okay uh we need the key I guess as well mhm oh oops [Music] okay you also need to um let me just do it for you it's just easier oh it's not the ah it doesn't use the value directly that's it okay yeah and then we can just remove this cuz it's no longer needed cool okay and then uh handle change and then we can Define our handle change in

here and think about the changes that we need to do okay we need to filter out the countries by the capital uh so we could go over all the countries and then use the filter function to check if the capitals inside you could but there's a API Endo for this and you should use the API end point oh exactly to filter by Capital City use the API end point okay so I just provide the capital to the end point mhm that's it okay okay so we need another uh another fetch I guess yes and then

we just set the capital from the end point yes okay so I mean could just copy and paste it mhm and uh just rename it real quick um we going to fetch from Capital slash um yeah you you don't receive an event you receive the value directly the string oh okay it's abstracted away from you value uh it's just a string right okay um then value and then set capital guess that should work uh do we need to pass a value no you've already passed you need to pass um fetch data is declared oh I

guess I need to fetch the data right I need to call it okay that might be it let's see so that's uh okay um Let me let me just see if I can filter it does not work okay what's the issue I don't know it doesn't work uh just in the interest of time or like uh above time right now I'm just going to show you the solution but I really like that you did it this way because it's a different way than I would have thought um I would argue it's a little bit more

complex and not necessarily the the best way but I completely get it and you are on the right track with your reasoning so what I would do because this onchange here gives you a key right I would only have this handle change worry about setting the capital here right because you haven't used it anywhere right like set Capital all you did ah okay so here's your mistake you tried to set the capital of data that of the data of the result you would get countries back you wouldn't get a capital ah okay so you would

do Set uh what is it countries okay now let me just see if that does anything no it doesn't it completely crashes the application so don't worry but this is right so instead of doing this what I would do is I would just have this handle change here right simply set Capital value as capital right you have to cast it here as capital because if you don't it's going to complain that value is not basically this can be any string and there's no way to know if like this is one of these strings right so

like what you want to do is you just want to tell type script that like hey I know this like it's fine right but even if you're doing this then you actually don't even need this handle change function you can directly do it here inside of here do this value and then just paste this like this right and then you get rid of this function which isn't needed in this case okay then yeah makes sense you have this set Capital so you're updating the capital the only thing that you need to do is pass it

here in this use effect instead of creating a new function just plug it in here right so what we can do is we can just come here and then we can do if Capital then we're going to do oh let's let co-pilot see what it comes up with will it work right so if Capital we're going to do the same thing we're going to fetch but this time the capital URL with the capital and then we are going to parse the data if it's not we are going to just run it as we had it

before but now that we have Capital here in this use effect obviously we need to provide it in this dependency array and then we have it here now we have these two lines that are like repeated code I don't like to see that so what I'll do is I'll just do con URL equals and that's going to be Capital question mark and please copile it there we go so if we have a capital our base URL is going to be this right which we pass in the capital if we don't have a capital it's just

going to be all which means that we can get rid of all of this code actually and just instead of here we can just pass it D all so now whatever we have a capital we don't have a capital we're always going to fetch it we're always going to parse the data and we're always going to set our countries to it we passed it here to our use effect and then it's done if I press save go back to my application reload everything we have no errors in the console I can select capital and we

only get the capital that we want right so this is usually the best way you have to think about this this use effect is responsible for doing the fetching and it will listen to some triggers in this case capital and if Capital changes it's just going to run it the code again again and then with the this time with the capital so that means you're on change here all you really have to do is set the capital and you know that this use effect is going to handle it for you which arguably is one of

the good things about react and one of the bad things about react because you really need to know that this is what this use effect is going to do and in this component it's simple we have one use Effect one piece of two pieces of state but if you had like seven use effects like what's going to happen if you change this value right that's one of the downsides you can get really mixed up you can can get like very comp complicated things and I think that's why a lot of people like complain about react

but don't worry dude you did really well you accomplished all of these goals and even the way that you were trying to approach it I completely understand why this is just a slightly better pattern because it leads to cleaner code and you don't have to repeat yourself by creating multiple of these functions but you did very good so that's the end of the interview couple minutes above but not too bad you did very good thank you so much bdan for participating for your time and um we will let you know if we will hire you

for Cs and solutions all right man cool thank you so much so yeah thank you once again and uh yes we'll be in touch all right take care cha so there you go guys that was a real world mock interview for a react position with my good friend bdan again shout out to bdan huge thanks because he took the time out of his day to help me out with this video with this interview and I think he did great so please do let me know in the comments down below what you think he did and

he will most probably be reading these comments we'll see so yeah if you guys enjoyed this video as always you can click here to subscribe it would really mean the world to me you can also click here to watch a different video of mine which I'm sure that is super awesome because YouTube is recommending it to you and with that being said this is darus caen you're watching CA Solutions thank you so much for watching and I will see you all in the next video cha cha