React Interview Questions | JavaScript Interview Questions | React Interview Experience #react

is the very first question was this interviewer asked what happens if I uncomment the first two lines guys here we need to understand a very basic thing that this function is a function declaration which is initialized at compile time only and that's why it's available everywhere in the file does not matter we call it at the top or here or here and guys this availability of function at the top of your code is known as hosting whereas the second function is a function expression which is not hosted which means it loads only when The Interpreter reaches this line in simple words we cannot use function expression before they are defined so this function is defined in line number eight so we cannot use it before that so with that knowledge we can answer this question let me increment the first two lines guys you can see the function 4 runs fine but the second function call throws a error and I hope now you know why the next question was this he said the problem is this function always prints only 10 and that too as soon as I call this function but I want to return both the values and print only when it's needed page the problem in JavaScript is that a JavaScript function can have only one return statement it cannot have more than that and whatever code you write after the first item statement will never execute and it becomes unreachable to solve this problem in es6 generators were introduced generators are different kind of function that can pose the execution at one or multiple times and resume the execution whenever needed and that's exactly what we want to convert a normal function into a generator function we need to add a star either here or before the function name I prefer to use it and it's a generator function now and we can replace this return statement with yield keyword now okay and now you can see generator function does not run the code instead it returns a generator object and whenever it Encounters this yield it saves the state pauses itself right there and to resume the execution we can call this next method which is available in the generator object and this will resume the execution from where it was posed so now let's call the next method on this result and before we let me clear the console it I can see guys it is an object with two properties one is value and one is a Boolean flag here you can see this is the yielded value and if you want to print it you can write dot value as well if I didn't get 10 back now to print a second value we need to call the same thing again and this time 20 is also printed let me clear the console and try to call it one more time without the value I will see 10 is printed 20 is printed and now this next returns a object which has a value undefined because there is nothing after the simulator has really 20 and the done flag is true now which means this is done otherwise with the help of generator function we have solved this problem the next question was this here is the object and this is the expected output basically what's happening is there is a array inside that there are two more arrays and these arrays are getting generated from these key value pairs of this objects only so here we have a name as the key Ram is the value and in the first area you can see Ram a name is the key in 30 is the value and here is the second array so what I had done is I did it with the object dot entries method object.entries method takes each key value pair and keep them in a individual array and then all these individual arrays are kept into a single array and that's exactly what we want to do here correct so for that I simply console log objects with a capital O DOT entries and then happened put entries and then here we can pass this person object and now if I save it you can see we have a array and inside that there are two more arrays if I open the first one it has name and RAM and the second area has is in 30. so it's working fine but to that interviewer said okay it looks good but try it to do without object dot entries method basically he wanted me to create a new method which does the same thing okay so for that let me comment it out first and I'm going to create a new method let's call it get object entries okay and of course it takes a object and let's call it the object uh is the person here so I'm going to pass person now let's write the logic so to create a array like this first of all I want to get all the keys from this object so to get the keys I can write const object is is equal to object with the capital O DOT ease and pass the object we are getting from the method by calling it right so I'll pass object here and now just let's log it out so that we can see what's exactly in there okay so here we get a array with name and age and name and A's are the key of this object next I want to iterate over this object keys so I'm going to write object dot ease dot map and inside that there is a key and inside the Callback I'm going to write const value equals to whatever this object and pass the key to it dynamically with the square bracket we can pass the keys dynamically okay what it will do is it will iterate over these object Keys basically these Keys name and A's then first in the first iteration we get name here and here you can see object and name will be passed here okay then object name is Ram correct so the value would be Ram here in the second iteration when a is passed then object is key will be passed here and then it will get the value for t Okay so first it gets ram and then it gets 30 and if there are more keys and values then it will keep iterating over that okay and then I can return a array so in the output you can see there is an array with e in the left side and the value on the right side so here I'll return the array with the e in the left side and the value in the right side as you know map creates a new array so basically this is the inner array this array these two varies will be created by this return and this map will create a new array which will wrap all these returned arrays right so this I can store okay and here we can finally return the result okay and now let's print it by console Lopez result like nearly console and save it this first console is coming from this object.keys just ignore it and the second console log has a array with two arrays inside it and if I explained you can see the first array has name and RAM and the second array has is and 30 which is the expected output as with that we have solved this problem if you know any other way to do it please comment below guys the next question he asked me was a fake question he had shared me this data this was uh HTML with some content and some styling and actually it was a string and he wanted me to display this in the UI with the stylings okay so for that let me store this into a variable called Data and and before going to the solution let me show you a very interesting use case of this kind of HTML string let's open amazon.com here open the network tab first inspect it and then select the network app from here select this fetch shr and then refresh the page so that we can see the APA calls okay and here if I scroll on the home page you can see there is this sponsored text with a information icon right and now if I go to the feedback API and check the response of it so here is the headers payloads and the preview then you can see there is a HTML property then script and then set a script has some JavaScript I just want to show you the HTML so in the HTML you can say this is a string and if I scroll more to the right we you will find that there is a sponsored text as well which is displayed on the Amazon home page okay so let me scroll it has some stylings also and all that and if I keep scrolling then okay here you can see this the tag is getting closed here and then there is this sponsored text okay and with some HTML I mean with some Styles and all that the point I want to highlight here is that company like Amazon is also using this HTML string approach okay now let's go back to code's inbox and here let me pass the data and save it now you can see on the UI it is displayed to the UI but as is the styles are not applied here but the interviewer wanted me to apply the Styles as well the problem here is react is unaware that there is HTML inside this string for react it's just a normal string and that's why it's rendering it as is to make a react aware of this we can use a property called dangerously set inner HTML okay which is a equivalent of the inner HTML attribute in the browser Dome okay with the regular vanilla JavaScript if you want to grab some not grab if if you want to change the content of any HTML element we use that in the HTML attribute right similar to that if you want to get the similar behavior in react we can use dangerously set inner HTML before using this you need to keep two things in mind one the element here is a tube element we are passing the property should not have any children which means we cannot pass this data like this also we need to use the element as a self-closing tag this is the first requirement the second one is it requires a object the HTML key underscore underscore HTML and then there we can pass the data and guys now you can see the style have been applied and there is one more thing you need to keep in mind while using this dangerously set inner HTML that it exposes the user to cross-site scripting attack guys the next question he asked me was to implement resonation he had shared me this API link this is a Json placeholder API and there are 200 random to-do's in this so he wanted me to display all these 200 to do's and Implement designation okay also along with the periodation he wanted to have a drop down from where the user can select the number of to-do's it is played at a time and of course there should be a previous and next button with the presentation okay so to do that first of all I'm going to import use state and use effect Focus From the API so that we can store the uh State different states and call the API with with use effect and I'm also going to import xeos to call the API okay first of all let's create a new state and let's call it to do's and a function to set it is set to Do's equals to use State and initially let's say it's an empty array of to-do's and to call the API with hooks I'm going to use use effect and here we can pass the logic and after that empty array which means it will behave as a component rate mount it will only run the logic for the first time the component is mounted and that's what we want we want to call the API only once when the component is mounted for the first time okay here I'm going to write xios dot get because this is a gate API and let me copy it and pass the API to it and write then which takes a callback and Returns the response and here I can write set to do's phones dot data and save it with that RFP will be called for the first time and it will save all the to-do's in the to-do's variable okay now let's use this to do variable and I'm going to write to-do's dot map this takes a callback and here for time being let's add a P tag to see whether we are getting the uh to Do's or not and here I will pass to do Dot title because in the API you can see every to-do has a title and ID key as well so I'll use the title here and that ID key we can pass as a key to every P tag to dot ID okay and let's save it fine guys we can see all the 200 to Do's here okay now the next task is to add the designation and write the presentation first of all we need to know the total number of phases which should be displayed here for that I'm going to create a new const um of protein is equals to to be calculated with this formula at dot CL which basically rounds up uh the given number to its closest integer so for example if a value is 4.7 then this will return 5. the value is 3.2 it will return 4 because 4 is the closest integer to it and it rounds up okay and here I'm going to pass to do's which we are getting from the API Dot then length is 200 divided by and let's say we want to display only 10 rows so here we will pass 10 if you want to display 30 we'll pass 30 50 then 50. okay for now I'm just writing 10 here and the better way would be to create a state to this value 10 so that we do not have to hard code it here so I'm going to write to Do's per is and set to Do's per days equals to use State and then pass the value 10 here and instead of hard coding this 10 here I'll pass to Do's per page now now we have the number of total Pages if I simply go ahead and play it here let's say H1 and then pass this value number of total pages and Save and scroll till the down you'll see we get 20. because there are 200 to Do's divided by 10 becomes 20. if I make it 50 and Save now you should see 200 divided by 50 uh four pages correct so here are the four pages but we do not want to display this 4 we want to display a previous button then one two three four and uh next button right so for that we need to create a array by using this number the number of total pages to create a array with a number I'm going to write a new variable Pages because these are the pages only which we are going to display one two three four and here I can create a array and pass it the number of total Pages uh let me show you what it gives us uh console DOT log pages okay and let's go to console and save it you can see guys it gives us a array of 4 and defines okay because we have passed the number of pages here which was four so it gives us a array of foreign defined if I make it in here then it should give us a array of 20 and defines okay and if I make it bigger you can see each undefined has a index also from 0 to 19. so we will be using this these indexes only to this to create the pagination and since it starts from 0 and ends at 19 but we want to display the position we want to start the position from one and we want to end it at 20 correct for that we can add a plus one here and if I save it I will see it starts from 0 and it ends at 20. now in our code we can just ignore the first index and then it will start from 1 to 20 okay and for that I'm going to write these array and I want to spread it save it now you will see in the array we have the 0 to 20 but I do not want to consider this 0 for that I will simply use the slice method of array and pass one to it which will kind of ignore the first element in the array and let's save it is now we have a array of 20 elements starting from one and it ends at 20 that's exactly what we want to display to the user right so now let me delete this console and these spaces I can instead of this number of total pages I can use phases Dot map NPS and here I'm going to use a span so that all the page number uh displayed in a single line if I use a p or basically a block level element then they will be displayed in a different different line like one two three four five like that but you want to all of them in a single line so I'm using span here and I can pass a base and every element should have a key so I'm going to pass E equals to the base okay and instead of this H1 I'm going to use a P tag and let's save it and check how it looks okay so now we have the designation here for these Pages uh to additionally use these phases I'm just going to add a pipe here so that we can clearly see that this is the base so I'll use a string template here and this will be dynamic value and let's save it that you can see we have a pipe between and let's add a space Also now we can clearly see that okay these are the different pages and I want to have a previous button here and an x button here for that I'm going to add a spam and which says previous and let me copy it and paste it here let's call it next okay now you can see like previous and next now to select any of the piece we need to have a state and let's call it current days and here I'm going to say set current is equals to use state the initial value would be 1 because For the First Time the first phase would be active now we need to find a way whenever user clicks a button we want to get only those to Do's uh which should be displayed on that page right so if I click page number 10 then a set of to-do's which are associated with page number 10 should be displayed nothing else right so for that uh we have our original to-do's and uh well a page number is clicked basically we will display a portion of all these to do so all the number of voltages is 200 and whenever a page is clicked we will pick some set of to-do's from these 200 right and to pick the set of to-do's from the original to do I'm going to create two variable one is const uh index of last to do equals to current base into a to-do's per page so what's going on here is we are just calculating the index of last two current P so let's say I am on page number four then the to-do's displayed will be from 30 to 40. so I'll just say current base is 4 and today's purpose is 10 so this becomes 40 right and similarly I can get index of first to do right I'm going to write index of last to do minus produce bird base so in our example if the Base active is 4 then last is index is 40 then for T minus two dose per page will become 30 because this is 10 in our case right that's how we get the indexes first and last to do and now this portion only like from 30 to 42 does only go to display and to pick a portion from uh array we can use slice method so I'm going to write here a visible produce okay and here I'm going to write produce Dot not shifts it's called slice and here we can pass a start and end index so first I'm going to pass the first first index and the second parameter I'll pass the last produce index okay and by default slice does not include the last to those index so if I pass one and three here then it will pick one and two only it will ignore the last index relatively only 200 to rows here instead of displaying all the tools what I'm going to do is I'll say take visible to-do's and Save okay with that you can see we have only 10 to-do's visible because we have said to those purpose is 10 now if I make it 20 and save you can see there are 22s displayed okay so let's uh three back to 10. the next thing I want to implement is whenever a user click uh any page I want to change these to-do's according to the page which is clicked what I need to do is so this is my page here I can add a on click event and inside the on click event I can call this uh Set current page because whenever user click any page technically the user is changing the current phase only correct so we will call print face and pass the base number two item so guys with that if I click any of the page number let's say 13 the to do changes line changes and so on so this is working now I want to implement the previous and next functionality and before doing that let's let's add some Styles also here so that we can see which button is I mean which phase is currently active Okay for that I'm going to write a class name here and inside that I'll write a backtick and I'll write current phase that is equal to the base I clicked right so I want to have active class for that will Define the active class in a y and otherwise I'll just keep it like this and I think I have moved I think it should be inside the battery not outside so let it move it inside and save it and now let's define the active class in the styles.css by the way we are reporting sales.cs here and here I can just write the active class color is purple let's say and uh just make it really clear that this is active I'm going to increase the font size also and let's save it and there I'm going to save it that if I click one it's not working there is some problem let me quickly check it what's the issue it should not be closed here actually it should be closed at the end let's save it the external some issue that unterminated string constant so okay I forgot to add the screen close the string here I will save it or with that you can see double number page number four is active if I click 10 this is active I click one this is active similarly we will implement the previous and next button logic we just need to check if the active base is one then previous should not execute the logic whatever logic we write and if the active page is 20 then next should not do anything okay for that let me add event listener one click and here I will write previous is Angler and similarly we do next and right don't worry we are going to write the logic for it in a while and here I'm going to write next please Handler okay now the first let's try the previous page Handler and so this huge effect should be at the top note here so let me right here this is the connection guys so your hooks should be uh in the sequence right now we have all our variables here then I'm going to write const ious page Handler equals to this and as I said first condition would be if current pays is equal to 1. I don't want to execute the logic so let me make it a note operator here and then this is the record is not required because this is a one-liner so I can write set print page and I'll just uh decrease one from the current pages so what it is doing so if it is let's say the cube phase is 12 and I click previous correct then it will just move it to 11 by using this logic current page minus one similarly uh let me copy it and here I'll just write next and instead of one this time I'll pass the number of total Pages the number of total pages is here let me copy that and paste it here and save it and instead of minus we can make it thanks now let's try uh if I'm on the piece number 12 I click previous it takes me to 11 then 10 and 9. similarly if I click next it takes me 10 11 and 12 guys the next thing I want to implement the only thing pending is we want to have a drop down here by uh using that we can control how many to-do's will be displayed will be visible to the user so by default 10 are visible so we want to make it Dynamic for that I'm going to write uh HTML select element so I'll try it select here and close it and now we have multiple children inside the written method so we can use this is a perfect case to use react fragments and inside that I can 50. now you can see we have the different values here and now the only thing is whenever the user selects one of them these visible to do should change okay for that I'm going to write a own change event listener which takes a callback and gets a event okay and then I can just uh hit set rules per pace and by default it was 10 now it will be event Dot Target dot value and save it there is some issue actually it should not be a round bracket it's a curly bracket so let me change it and save it cool let's go to First waves and we have 10 produce now if I change to 30 you can see we have 30 and the page number is also got re-rendered accordingly so we are displaying 30 to Do's per page and there are 200 uh to Do's right so it makes sense that there are only seven there should be only seven pages and now if I make it easy to 50 then there's only four pages and guys we have four pages yeah if I click next it works if I click previous it works if I click any specific button specific place it works so guys this is implemented if you feel we can improve The Logical position please comment below okay so apart from these uh JavaScript and react coding questions there were some uh Theory questions as well the most of the questions from this video only so you can check out the video in the description I'll also put the link here in the video itself so you can go through all these three questions and I think you'll be good for the interview [Music]

Channel: itsCodingDoctor

Views: 66,729

Keywords: react, javascript, frontend, software, development, coding, tutorials, redux, html, interview, css, git, json, node, mern, job, preparations, code, learn

Id: szXMBGKGTdE

Length: 33min 2sec (1982 seconds)

Published: Sat Feb 04 2023