REAL React.js Mock Interview Live Coding 2025 (Build Travel Cost Calculator)

hi everyone today we are here with bton and we're going to go to a live coding interview react interview this is a real coding challenge I think that what some of our mes uh got and we decided to solve it today with you um ban are you ready yes awesome let's go then um I sent you a link with a um mockup and let's go through it this is what you are going to build today this is a travel cost calculator um as you can see it's a it's a web form we have a starting point a destination this data will come from an API but you're going to have to build the input forms and based on that in the vehicle type that the user is choosing we're going to have a calculation going on that's the total amount the submit functionality that you see there with this button submit that's out of scope for today but there's a catch right when you click on the button add additional destinations right you see it add additional destination another um destination form should be added okay okay um so far so good yes I do want to ask a couple of question before we get started okay so correct me if I'm wrong here we have a starting point the user will edit this so they type Berlin or whatever should we add any validation at this input field for the scope of the exercise we could but uh again we don't have a lot of time here no no validation needed so far okay and then they add the destination and if they click on add additional destination they can also add more destination Fields yes perfect then we have the vehicle drop down and these options come from the API yes you will have to mock this just you know we're going to add the once you see here car train plane MH um perfect and then the expense name is calculated from what I see based on the starting point and the hypothetical destinations but the users can edit it and then I see here this total amount which is the one you mentioned we need to fetch from the API should we fetch this every time they type or they change the destination yeah I want you to mimic the fetching again we're not going to query the API this time so maybe you can marck it using um yeah some JavaScript function so I I would assume the amount has to be refreshed every time somebody adds a new destination or change for example the starting point is that right yes okay and the summit it's all the scope okay perfect so I'm just going to go ahead and sketch really quick before I go in type um the component structure try to identify the state so it's pretty obvious that we have some sort of starting point state so we have a starting point input I'm going to add State because users can modify that um then we have a destination array so we definitely will have a destination array that we need to submit and I would assume why are you going for an array uh because this is a list of destinations and we'll be able to add more destinations or remove I would assume when it comes to destination object I would say because we I mean we could store this as strings but that would limit us so assume we're going to have to create an object here and I would say one of them would be the ID of the destination and the other one would be like another value so I'm going to model them like this so let's say this is Berlin and for the purpose of the excise maybe we just keep this to the lower case value but this should be a unique Ida just because we we're going to need the key value for for react when they re and whatnot so when people add a new destination there will be here a state transition we add a new uh destination with with probably a random ID an empty value and then here we're going to have state which is basically the uh vehicle type options MH okay and then this would be just another input field that call it expense name and we can use an effect to whenever somebody um changes it they they can either change it manually or have an effect or like whenever they change the other parts of the state we update this version okay and then we also recalculate the amount with a fake uh with a fake call perfect so this would be all the essential State out here I don't see any derived State um because this is coming from the uh back end there's definitely know theive State here everything I see it's essential State because all the state had like it's pretty much independent this amount looks like theive State because it feels like we can compute it from the other values but we're not doing that on the client we're sending things to the back end and then getting it back yeah we only have essential State here okay cool so should I uh I think I'm ready to switch over to the code and we can start trying to implement this uh sounds good just before we do that I mean you talked about essential State and derived State you know what is essential state for you what is derived State what's the difference uh so essential state state that um basically it changes independently and you cannot really derive its value from the other state variables in derived State it's basically State calculated based on other state variables just to give you an example from my past work whenever you have a checkout card you could assume that the essential states are the items in the card which can only change if the user does something and the deriv state would be for example the total amount or the tax that you calculate based on the items awesome there then let's go and uh let's uh wanted to see you building this thing uh do you have your vs code everything set up perfect let me share I do have a V starting point with Rea see my vs code uh I see your vs code yeah you've got a app TSX file open that looks fine Vite can you just before you dive in tell us a few words about why Vite versus web pack what's the difference if any um Vite is just faster and easier to set up these days and most people are moving to Vite I love web pack I worked with web pack before it's just becoming a bit slower so noway pretty much everybody goes with Vite because it's it's a lot faster well then let's go with Vite okay now I'm not going to focus on any CSS in the beginning I'm just going to go ahead and write um the bare structure kind of of this whole thing let me just and by the way should I disable copilot I I do with copilot most of the times what do you prefer for this interiew let's say you can use copilot yeah so in our company we do use copilot so yeah you are allowed to use copilot I'm going to start with the uh with this structure I'm just going to code uh the HTML markdown the GSX for this and I will not focus on making individual components at this point yeah it's just kind of the Bro Force approach to this interface which basically means just let's get the markdown rolling and then I add the functionality with this state so um we have just to start with our first group would be a label with um what do we have there that's a starting point starting point and then we have our input field and let's see what does the input has has a placeholder let's say Place holder that's Berlin and just to make this if we were to make this super accessible we can say HTML 4 and then we can add a name to this so the name would be uh this is the starting point perfect and I'll call this starting point now this would be our first input and we basically have another one that's our first destination so that would be our destination 01 let's say going to call that destination and the placeholder would be London and this would be destination 01 perfect so then is the add additional destinations button so I'm going to add that one over here and this is a plus additional destination Okay add an additional destination and then we have our drop down and then expense name so basically we're going to have a select and we're going to have a bunch of options I will high code everything for now and then we kind of go in and make everything Dynamic okay I'm just using copilot uh suggestions but we could use car train and plane and then we go over with our last one which should be that div and then we have our expense name Berlin and Paris cool so we have our label uh expense name as you see copilot goes goes ahead and does a lot for me but expense name and then this would be uh no no placeholder and I'll just call this expense name perfect I'm going to format this format this document and the last part is the total amount amount in the Su button so I'm going to put all this together also in a Dev okay that's a closing tag that will be our total amount and that will be whatever 01 uh dollar and we're going to have a button that is a submit button I'm going to go ahead and just add a type here and make this a button because if it's a type submit sometimes you get some weird behaviors so this is just basically the uh let's take rid of all this stuff it's basically the simple HTML markdown how does this look like here okay looks nice good stting point okay I'm going to add a travel cost calculation just for the sake of uh being uh perfect travel expenses calculator copilot is pretty impressive so now it's when things get a bit more interesting I'm not going to care about the CSS at all okay we just want the functionality um so let's start with a simple State and I'm going to handle a state here we could have put all this in a form and then manage the form values but I'll choose independent inputs because it's just uh kind of easier to get started with you choose independent Fields how are you planning to manage the submission right because when you choose a an HTML form right kind of the submit buttom is going to grab everything that's in the form right um how are you going to do it so I basically have an on click on the button and then store all these values in state if I were to have a form I could access all the values At Once by doing form do um like even the target. form and then get all the values but it will still not be super straightforward to get those values and validate them it's slightly easier if they are separated awesome so this is our starting point and we have the State starting point and that would be a use state with I'll say perfect so that's our first one and then we said we have our destination list I will call it just to be super explicit and call it set destination list and that will be the initial value will be an an array with one destination um so we're going to do this and here we mentioned we're going to have an ID now this is gets tricky how do we generate an ID we could actually do string of matt. random um I do not recommend this in production but it's good enough to get started how would you do it I I don't want the implementation but how would you do it in a production environment probably use something like a uid for a much safer ID kind of the standard solution yeah and I know some use cases where people actually they make a request to the back end and create it in the back end so then you have data Integrity but your ID should be fine so you don't do it only client side right you you quate the back and then you make sure that you're actually consistent with what you have in the back end yes um and then I would add the add destination this would be an event handler we can handle the the state transitions afterwards but let's go for the for this one here we mentioned this will be fetch over the network so I'm just going to fake that I will create an a sync function um and call this get um vehicle vehicle types and um let's say it has no parameters and it just returns an array of value and label for for this types we can fake that we can just do turn a new promise because we want to kind of comply with the sync function yeah you want to remake the API fing Behavior right exactly so this will resolve with um perfect yeah that's I would probably also need a value here but we will use the label like this should be the actually the label which should be normally translated and one not so what do we want to do here um we do have our vehicle type list and we want to set that and in the beginning it's an empty array um and then we just want to do for now I would use use effect for this there's better ways than use effect nowadays I go with this could you just mention some of those better ways yes if you want to avoid effects you can look into use qu which avoids using effects and it gives you the loading and eror State uh for these vehicle types because normally I would have a loading state that I need to display so I'm going to go with this yeah um you should have to handle all the network uh use cases right aor loading just like a network client right and and that's what query does for you but for now let's just roll with use effect you know maybe that would be for a second iteration on this mhm um now I have a type error because I did not declare the type of these vehicle types so let me just declare it interface vehicle type and then this should return a promise of vehicle types perfect and now I should have no type error perfect so that's the vehicle type and then we finally have the expense name um which would be again just a string so that would be constant expense name and then set expense name to that state okay and then we have the amount which is another state because it's get we get that from from the back end so that would be also constant total amount and we start with zero and you mention I need to fake that one too so I'll just go ahead and do like an a sync function perfect that takes all that in and then it returns a promise with a number and it returns basically this but we can also do this a mat dot random by a th000 perfect so that's our amount function I'm going to zoom out so you can see it perfect and so now yeah now let's try to connect these two things so we have the markdown um the first thing I want to do is to connect the starting point and this should be got straightforward we can just say that the value of this it's equal to the starting point and we can also say that on change then we will actually trigger so this will get an event and then on that change we want to do St the starting point to even Target of value oh pilot it's amazing yeah let me see if this worked out berin let me see if I can inspect this and debug it with my debugger that's always the best idea we have our app perfect and that's the state so ideally if I type something else works perfect so I guess you can mhm yeah I can see yeah it works awesome then it's going to be a bit of busy work making the oh no this is when it gets interesting so we have the old whole destinations wow okay that's copilot but I'm going to do it myself just for the for the sake of it so we have our destination list perfect and we want to map over that so that's our map function and I close this perfect and we want to return for each one of them we want to return this and now I'm just going to go ahead and do some smart replacing we know that each destination has I probably should an ID and again a name and I'm going to declare here the interface perfect ID and name and then make this perfect and provide this as a destination list just because it's going to make all the type in fragance type in fragance will make everything easier so we have destination here um and we know it has an ID all of the sudden we could actually add an ID or a name here so the name would be destination we can use string interpolation here and do destination minus dollar sign and then destination.

ID for example um and the value uh okay so we have our destination yeah the value will just be destination do value okay. name that's what we use oh I understand now why I had value here because we actually need the value because this is kind of an input field so let me make this value that's uh oh be careful I'm getting ahead of myself care I'll be value typ thing and I think in the type in yes that's a value yeah perfect okay so that would be it we can actually use the this also as the label for perfect so that's fairly semantic let me form the code what's missing here the change so whenever I change the value here I should change the specific destination um and that's when it gets a bit more tricky because I need to find that value and recompute the state the easiest part the easiest way would be to have a new component and encapsulate that there but I'll do it here I'll just call this on change and then perfect we have the change event and here what we want to do is to find the destination by ID and then um create kind of the new destination and then update that so this is where it gets tricky because we use the list for this we could use a hash map which makes things easier to update but a bit harder to render because we need to do like object keys and render them um I'm going to go ahead with the U implementation of the array but we can maybe discuss at the end about the has map I don't know how we're doing on time how how much time do you think I still have um I'll say at least 15 minutes at least okay 15 minutes not not a lot perfect so I'm just going to go ahead and say that this is my destination perfect that's the destination index and then I could either um let's create a new destination which is basically the ID and then we set destination list to the new destination list um so this would be the state update one second so this is our destination list but in the new destination at the index we set it so as you see I basically find that destination create a new one with a new value and then I duplicate the list and replace in that list that new destination and then update the state very inefficient we could do we can change this if we use a hashmap but for now I will go with uh with this implementation and just provide this to un Change so onchange okay let's test it out so going to go over here and click on destination click London and I would expect this to be London um nice it's working it'sing there you go now let's do this button so we have that button and basically what do we want to do on change let me just add it here State transition here we want to push add a new destination so basically we want to set the destination list to whatever the destination list was let me go in plus the ID and the new value mad random or string yeah this looks pretty cool compiler did have anything for me but I could have just typed it out and now we go to that button we had and add that on click yes and I'm going to add a type button here just to make sure that if this will be wrapped in a form we don't get some weird Behavior by submitting the form let's see so I click on ADD destination and I'm going to say Madrid and this would be Berlin so we have Berlin and here we have Madrid and London yeah looks pretty pretty decent look this this IDs are very annoying cool okay let me go back and see how we're doing so we're basically all the way here we we done all that we could delete destinations if we wanted to just by finding it and removing it in ARR but I'll move forward with the vehicle type and then expense name and the amount okay so in the vehicle type we just want to transform this into a uh vehicle type Maps vehicle type. map perfect very good and then we have some logic here and here I will have an option with that key we need keys for performance um and I do think we need a value too because that's how you know and I'm going to use the the label as a value but normally there should be a value because the label is something that humans can read it can be in different languages but the value should be Universal maybe you clean the other options nice perfect and now let's see if I go over and what's Happening Here I click talk pluss okay now let's connect it to State can go on change and just say we have an event and it basically says set the vehicle type oh we don't have a state for that so that's the one we missed constant that's a field itself yeah selected vehicle type so two things we need a Setter to the event.

target.