React JS Live Coding Interview 2023 - Cracking the Interview (Mock practice)

We interviewed a college student for React JS live coding mock interview round. There were react js-based component development questions which checked for some HTML and React knowledge
#reactjs #javascript #coding #interview #interviewquestions #mockinterview
🤯 Crash Courses (Single Video)
Git/Github Crash Course : bit.ly/3JSA5VT
TypeScript Crash Course : bit.ly/372dZSh
Angular Crash Course : bit.ly/3DoGJR1
Vue JS Crash Course : bit.ly/3uDujRl
Python Crash Course : bit.ly/3Dod7U2
React Router Crash Course : bit.ly/36YfO2i
🧑‍🏫 Full Course Playlists
HTML : bit.ly/36IMq0h
CSS : bit.ly/3LpRQw6
JavaScript : bit.ly/3u049tf
BootStrap : bit.ly/3NA9nDJ
ES 6 : bit.ly/3DvYCh6
DOM Playlist : bit.ly/35nMKB7
ReactJS (Redux & Hooks) : bit.ly/3iMethN
React with TypeScript : bit.ly/3fQjXtF
React Hooks: bit.ly/3Vmh7wV
Redux: bit.ly/3yAIIkl
NodeJS/ExpressJS : bit.ly/35nN6Yt
MongoDB / Mongoose : bit.ly/3qPj0EO
💻 Projects Playlists
MERN Stack Complete Ecommerce : bit.ly/3ymSs0E
Web Design HTML+CSS - Home Page : bit.ly/35nZiIB
Web Design BootStrap - E-Commerce Site : bit.ly/3iPhaz7
React/Redux/Firebase - Todo-App : bit.ly/3DnekL8
🕹 Mini Projects (Single Video)
React - Tic Tac Toe (Redux / Hooks) : bit.ly/3uzLEuy
React - Game of Flag Quiz (Hooks) : bit.ly/3LpTC0e
React - Google Translate Clone (Hooks) : bit.ly/3Lo9xvZ
React - Chat App using Firebase (Hooks) : bit.ly/3wLgymj
Visit our site: coderdost.com
🔴 Full Courses List : coderdost.com/courses
🔴 Full Projects List : coderdost.com/projects
💾 Source Codes at : github.com/coderdost

[@coderdost]

Code : codesandbox.io/s/delicate-river-8zur7n

[@kanjarlanarasimha2605]

Sir in your code why we need countries [country] && in second select drop-down tag please clarify my doubt sir

[@arpityadav7290]

For short-circuit Means jab tak country select ni hogi tab tak country state blank rhegi toh error through karegi isliye && means aagar country state me value hai toh he vo aage move karegi

[@ravivishnoliya7316]

no use of useeffect here

[@user-dq5us6bs7s]

Do we really need useEffect in this code?

[@WaqarAhmad-qz8mv]

Good that you are suggesting, not like other interviewer who just stay silent and think that you know nothing

[@pervert_kun]

This wasn't good either lol

[@anshupatel8087]

😂😂

[@shubhamgoyal1547]

A good strategy is to talk though your thought process. That way its easier for the interviewer to help and understand.

[@SunilparajuliKenshin]

while i might not know the syntax at the but as soon as i saw the questions what he can do it is: first map to generate options selection for country, based on country code i.e. "in" , upon selection of first item, he could filter the map to get selected country & selected cities in 2nd dropdown.

[@k303k]

Hi sir! This is very helpful.Pls create more react interview codings in the future.

[@How2-port8080]

Great for helping students..🙏

[@subhasisdas9916]

I'm very impressed with that interview er. He's very helpful❤

[@quickgyan5152]

That are valuable interview questions that's help to grap the opportunity for job

[@PaulGreen-lk1ym]

A very informative video on how 2 guys are looking for a typo in the code for about of 15 minutes. Ty😁

[@coderdost]

Happens all the time in coding

[@clashingtv2527]

For me 1st set the the country in state and its index! And default is blank or null! For second! I checked that if state empty then disabled! Bot are done by onChange! 2nd After setting the country and index enable the drop-down! And map the city 😁

[@bardenishi4312]

Outstanding !

[@sreeharinallapaneni1726]

That's a good approach, For second dropdown, you can try filter the countries with the selected country and extract the cities property and chain that output to map function... like below {country && countries .filter((c) => c.name === country)[0] .cities.map((city, i) => { return ( {city} ); })}

[@coderdost]

👍

[@hariacharya2534]

More comprehensive would be to store the cities of selected country in the state.

[@liamwelsh5565]

Using the index is more efficient. Your approach is O(c * n) where c is country and n is the number of cities in c. Using the index results in O(n) where n is the number of cities.

[@nikeshgupta1241]

@@hariacharya2534In that case you have to handle a case can read property of undefined

[@hariacharya2534]

@@nikeshgupta1241 how undefined? Set initial value in state to first item of array initially. Add on change event to update it. It's straight forward.

[@arpityadav7290]

Helps me a lot i am copying the question code by watching video and then a get this code sandbox link .

[@arjukumbhakar9398]

Woww❤ I'm impressed with the humbleness of the Interviewer ❤😊

[@bishwajeetpandey1570]

Wow so much helpful, i need more questions like this to practice

[@coderdost]

Sure. We will try more videos with more questions

[@SivaAbhilash]

People are who are looking jobs are busy how to crack interviews and people who are working as freelancers busy in developing applications using gpt-4 only difference both of them is person came for interview will work like a machine and freelancer will make machines work.interview is just a process of filtering competition not knowledge .alteast this youtuber is supporting sharing this video to lower the pressure of candidates going for interview 🎉

[@coderdost]

Great line .. interviews is just process of filtering… makes no sense for knowledge

[@vinothkumarv9722]

Its Awesome :) thanks sir

[@asifali_official3137]

great work sir ❤

[@MuhammadBilal-hq3xn]

Great I love this.

[@pankajsuryavanshi8332]

Waiting for next episode. Saved this playlist

[@iamkamal5960]

Great work Sir!! Video would be way better if you could explain the code at the end, will really help beginners.

[@hadeedtmgggg5837]

Bro he is mapping in the array and on the left hand he is displaying cities and in select on onchange the index of the country is set into set country and down below he is displaying cities when the index of the country change down below the country index change and the city element is changed like if country is India when it will change the index changed from 0 to 1 and it set in to country after that the other element access the 1 index object and display it's cities list❣️

[@Portal-Solve]

Can I explain it in easy language

[@csraju6623]

@@Portal-Solve yes go for it

[@siddharthjoshi3328]

​@@Portal-Solve Abhi tak explain nahi kiya

[@Portal-Solve]

@@siddharthjoshi3328 dil nhi kia wasy hi logo na itna code likhy ha.Tu ma na dekh kr behtar nhi samja

[@adeelkhizar5793]

Good job🎉

[@rsdeathgaming5027]

The question was very helpful for those who prepare for Interview I'm also preparing and I followed your whole playlist.. Thanks for the sharing valuable information sir 🙏

[@coderdost]

Great 👍🏻

[@kiranmuttanwar8275]

@coderdost what was the exp if that person? I mean at what level tvis kind of question are asked for freshee 1to 2year or more than that if you could tell

[@VishalSharma-rn7mt]

Awesome example

[@user-yk8od1of1l]

The intervewee is really great

[@rajubojja2446]

import "./styles.css"; import {useState} from 'react'; const countryArrays = [ { country:"India", value:"In", cities:["Telangana","AndhraPradesh","Rajasthan","Maharashtra"] }, { country:"Pakistan", value:"Pak", cities:["Pak-One","Pak-Two","Pak-Three"] } ] export default function App() { const [array,setArray] = useState(countryArrays); const [state,setState] = useState([]) const changeStates=(e)=>{ const filtered = array.filter((item)=>item.value == e) setState(filtered[0].cities) console.log(state) } return ( changeStates(e.target.value)}> { array.map((item,index)=>( {item.country} )) } { state.map((item)=>( {item} )) } ); } I tried

[@abhayraut5659]

const changeStates=(e)=>{ const filtered = array.find((item)=>item.value.toString() === e.toString()) setState(filtered.cities) } console.log(state)

[@CodingInterviewTV]

I've been asked about tools to use during the coding interview to get answers without the interviewer noticing, came across Coding Interview Champ not sure how good they are but looks interesting

[@mark-cr4by]

Nice thats a lot of pressure

[@ForLearning-jf1li]

please make some more videos like this

[@aparnas1613]

const [country, setCountry] = useState(0) Loads cities in India on initial render :)

[@coderdost]

Great

[@Anushree__12021]

I am a fresher.. during interview, interviewer asked to bring the file of other folder the to project directory using react code. I got reject in interview. Can anyone say what is the solution? Can we use import for this?

[@hashirmughal5625]

wow love from Pakistan sir you are great😍😍😍😍😍😍

[@pankajkthakur8042]

Onchange filter out the selected country object and amp other dropdown with filtered cities. Its an easy problem … i am giving interview they ask to call api and show some hierarchy level drop-down or create multiple components set data in context apis

[@coderdost]

In live interview over screen-shared or timed-assignments ?

[@ahndeux]

No stress.. No stress... YOU'RE DOING IT WRONG!! No stress.. No stress... YOUR SELECT STATEMENT IS BAD! No stress... No stress...

[@musicinc7851]

He could have used a state variable for cities and then simply update the state.

[@iftekhar_ansari]

Take index instead of taking value

[@shardulchaudhary3366]

I cracked internship with your help

[@AhmadAli-wt8zy]

We can also use useEffect hook and add country as a dependency. So when ever country changes it will run and change the city dropdown. Am I correct?

[@geetasarayaarts867]

Yes of course.but no need of adding useEffect hook here

[@bloggerayush8550]

for what LPA, we can expect this question??

[@sohebshaikh3344]

Mazaa Ayaa

[@harshagarwal7832]

This same question was ask in my interview and I live coded this in a great was the interviewer was impressed and I got a offer from the company thanku sir for this types of video☺️

[@pbarmyff]

Whats your package

[@harshagarwal7832]

@@pbarmyff That was only internship giving 15k per month for 6th months

[@user-dq5us6bs7s]

Do we really need useEffect in this code?

[@imnawasthi]

I have a slight confusion in this video, maybe i am wrong, but he created a state that accepts an object, then assigns a index(option's value) to it. Is it possible or i misunderstood something?

[@coderdost]

I think he changed it in between but due to scrolling of code editor, it was not visible. your confusion is correct and candidate changed approach in between,

[@ayskantmishra7377]

Is this interview only relevant for freshers or 2 year experienced also can take benefit this interview

[@jatinraval16]

it's very simple question;

[@Factvideo014]

New challenge for me🤔

[@DESTRUCTION1347]

Sidha filter lagate aap second map ka new array aata uspe

[@PunkSage]

The main issue is that the interviewee started by immediately writing the final code. It's usually better to start with a mock-up of the data and then add dynamic values with React. This way, we wouldn't waste so much time fixing small errors like closing brackets. I would give this person a 7/10 for their technique. Although they got the expected result, the way they did it wasn't very impressive.

[@AhmadRaza-uo8ze]

Now I feel good that I am not a noob

[@code_kraft7]

why he used value={country} in line 22 of solution please reply

[@igu642]

❤❤❤❤

[@tathagat9586]

❤❤

[@karanbhoite9552]

There is one bug , while sending values to backend country's value would be 0 coz setting index to value of country while doing onchange, This one is not proper solution i guess below answer would help you all While doing onchange on country select {item.name} While rendering cities countries.find((item)=>country===item.name)?. cities?.map()

[@coderdost]

yes the candidate just finished it, all edge cases not discussed.

[@karanbhoite9552]

@@coderdost keep uploading this kind of videos, I am also preparing for the interview its really helpful

[@vikasbhatiwal4878]

in your codesandbox . you checked for countries[country]&&, but the candidate didn't..... though his cide is working but when i dont'check countries[country]&& my console shows can't read property of undefined (reading cities. ) Please explanin the reason

[@coderdost]

I think candidate has changed the code later on . So may be some initial value of countries was there at top not visible may be in video..

[@pervert_kun]

Ok for a fresher

[@osama-ki_masi-ki_pota7677]

He is from iter

[@akshayshrivastava6057]

i am also a fresher(completed btech in last july) should i can also be a part of your coding interview for react or angular? please let me know

[@coderdost]

Yes as soon as we will start it again. right now no plans for it in coming week. But hopefully we will try soon

[@dilshadzm313]

How much will the payroll for this type of interview ? I'm doing way more complex problems than this and I'm getting 15k per month it's a startup company and they didn't even conduct a coding interview they just asked a few questions and recruited me

[@coderdost]

this was a live interview, where you have to code in front on someone in given time, so question was easy, but people are more nervous. Also they have to code on an online editor not their VScode. Payroll is very much dependent on your experience + city. for a fresher companies can pay very low. But after 1-2 year of experience the real worth of your work will be valued.

[@littleshorts6969]

*15 mins and a government website*

[@anuragsonkar3227]

35 mins 😅 : export default function App() { const [country, setCountry] = useState(""); const [cities, setCities] = useState([]); function handleChange(e) { const selectedCountry = e.target.value; setCountry(selectedCountry); const filterCities = countries.find((ele) => ele.value === selectedCountry); setCities(filterCities ? filterCities.cities : []); } return ( { handleChange(e); }} > Select country {countries.map((ele) => ( {ele.name} ))} {/** set cities */} {cities.map((ele) => ( {ele} ))} ); }

[@premprem4095]

😢😢I experienced that the same question my interviewer asked. I am failed.

[@user-uu1cs8jl8b]

i thought you were asking for nested type dropdown

[@coderdost]

No simple one only. Generally interviewer increases complexity on completion of each step

[@thanniruanilkumar8232]

This interview fresher level or Experience level

[@harrapanman621]

How to practice for these kind of machine coding rounds

[@coderdost]

Its best to make small projects, only making features for practice will not be a good idea - projects cover multiple such things in 1 project.

[@satyaranjanbehera]

i am trying this code but it is showing cities not defined

[@coderdost]

check the variable before the .cities must be having some issue

[@rohitghadage3220]

Sir one question I use ContextAPI is it necessary to learn redux?

[@coderdost]

redux's main cocept is about reducer/action/dispatch... you can learn these by using useReducer hook. Redux is not needed. but many companies using it..

[@hitsgamingparadise5243]

Yes it's necessary to learn Redux ... You can learn Context API too ... Because most of the company use redux. You can see that in their job requirements list. Even the company that I am working in uses Redux in 3 applications and context api and redux in both in one.

[@_ShaikhMohammedFazleHaqueAmin]

I also want to participate in mock test how can I do that?

[@coderdost]

By applying on forms. Form is released many times. All updates are on our community page on KZbin

[@anuragtiwari6910]

sir if possible please pin the codesandbox link for these interviews.... it helps us to try /edit these challenges practically

[@coderdost]

but problem is everyone edits it... codesandbox.io/s/delicate-river-8zur7n

[@anuragtiwari6910]

@@coderdost i think there is a option to lock the sandbox...so that the other person can only fork it for self editing ...and not change the orignal sandbox..like in many udemy courses

[@coderdost]

@@anuragtiwari6910 Thanks. will check this next time while sharing code.

[@expectedreaction409]

countries[country]..... i did not get it... help

[@coderdost]

Here they took country - as index of countries array. So this means selecting just one of array items

[@sumitpatil7473]

Please method se hota hai but forloop se batao pleas 🙏sir Reverse number put in same index number [12,23,45]=>[21,32,54]

[@coderdost]

without using Split() method ??

[@sumitpatil7473]

@@coderdost yes sir,without any predefined method.

[@sumitpatil7473]

@@coderdost cl(array.join(" ").split("").reverse().join("").split(" ").reverse())

[@coderdost]

I think you can just reverse the number by changing 10th places - and use a For loop on this : let remainder, reverse=0; let n = 321; while (n != 0) { remainder = n % 10; reverse = reverse * 10 + remainder; n = (n-remainder)/10; console.log({n, reverse, remainder}) } console.log(reverse)

[@littleshorts6969]

How to Share File Larger than 3 GB using webrtc

[@coderdost]

Never worked on this big file. There will be issues regarding reliability. How to deal with paused downloads and also how to deal with network failures.

[@rohantyagi8145]

Can anyone explain counteries[country].cities

[@coderdost]

i think coder has changed "country" as index values. so countries[0] is the object and in that object cities property is an array. which is being used

[@arsh10x]

Can I expect this type of questions for freshers?

[@coderdost]

Depends on company. But coding rounds can have such questions. In startups definitely they will ask practical problems

[@PIYUSH-lz1zq]

in codesandbox can we save the code there itself ??

[@coderdost]

Yes.

[@prasadjoshi4009]

How to use base64? Can you ad in form?

[@coderdost]

Base64 can be directly used in image SRC.. but if you want to cretae base64 fr some file use FileReader APi and use readAsDataUrl method

[@coderdost]

There will be examples of this on MDN etc sites

[@turantech]

Typing and not talking is huge red flag. You should explain what are you doing! At least in US we do it

[@DevDivine]

I am also looking for a ReactJS job if you have any suggestions then please let me know.

[@coderdost]

If you dont have job experience go for anything.. even an internship. And don’t wait for bigger jobs.. right now there is slowdown in IT but next year or after that it will be again boom. You have to get as much as experience by that time

[@ShoaibKhan-hy7zt]

​@@coderdost I am having experience of 7 months in react js and searching new job how would I get it 😢?

[@himanshusahu8220]

​@@ShoaibKhan-hy7zt Same 8 months of experience I have

[@ShoaibKhan-hy7zt]

@@himanshusahu8220 from where are you?

[@himanshusahu8220]

@@ShoaibKhan-hy7zt Gwalior

[@sankalpkala9219]

Is this expected from a fresher for on campus placement?

[@coderdost]

campus placement are based on Percentage, grades, and some coding skills. but live coding is not expected mostly. coding test also will be generic programming and DSA type - not React etc.

[@zakishaikh3201]

This is for freshers I thing

[@Dopamine432]

speak bro

[@blackpurple9163]

I was stressed to watch him try and fix his mistakes, it's even know difficult when someone is watching

[@coderdost]

yes real life stress handling is biggest part of interviews.

[@pranav5532]

Is this Question for Freshers or Experienced?

[@coderdost]

freshers

[@taandavyt8826]

Real mei to bhut tense situation hoga imagine krke hi fat rhi h sachme interview dunga to kya hoga

[@coderdost]

Unless you are going for a good startup job or senior level job - people will not take live code interview. They will give task to be done in some time limit. So it will be less tense. But it will be tense, so better to practice more.

[@user-zt3jk5gb9h]

how to do this in angular, any angular dev in the house?

[@coderdost]

stackblitz.com/edit/angular-wfmpqq

[@crabop1127]

Any Body tell me most commonly used platform for interview like sandbox

[@coderdost]

syncfiddle.net/ for javascript and simple web apps. It is live sharing without any account.

[@Pankajdutt14]

Is this guy fresher ? 😂. Itna easy question react ka maine 3 sal me kisi ne nh poocha 😂

[@deepanshuheer01]

Easy problem

[@lingarajhiroli965]

how can i get the code of this video

[@coderdost]

codesandbox.io/s/delicate-river-8zur7n

[@lingarajhiroli965]

@@coderdost thank you bro

[@rohitjadhav7844]

sir plz give me codesandbox link

[@coderdost]

codesandbox.io/s/delicate-river-8zur7n

[@rohitjadhav7844]

Thank you so much sir

[@abhayverma7080]

const countries = [ {name:'India', value:'IN', cities:['delhi','mumbai']}, {name:'Pakistan', value:'PK', cities:['Lahore','Karachi']}, {name:'BanglaDesh', value:'BG', cities:['DHAKA','CHi']} ]

[@m.sansari9934]

There are 3 ways to solve this

[@devlopersessential4349]

This was a fresher interview or an experienced ??

[@coderdost]

Fresher .college student

[@healingmusic..2683]

Sir please tell it's for freshers or for experienced ...🙏

[@coderdost]

freshers mostly.

[@dibakardey6038]

is thisa correct answer

[@coderdost]

There can be several type of approaches, even better than this. But as in interview, candidate was able to do this under 30 mins , and it was correct.

[@wizardtechnical]

Is it the right answer?

[@coderdost]

its almost right. there may be some initiiazation issue. also this is not the only approach to solve this problem.

[@shoiabalam2170]

i think we are indian we should use hindi instead of english.

[@ManojKumar-us5fz]

Stop calling Sir/Madam its interview

[@ankit21309]

Are these real coding interviews

[@coderdost]

Mock Practise, but the setting is real..candidates are actually preparing for react interviews and they don't know the interviewer before.

[@tushantkumar2707]

y work nhi kar rha hai mera m cities undefined bta rha hai

[@kulyog6626]

Share the code

[@tushantkumar2707]

@@kulyog6626 import React, { useState } from 'react' const countries=[ { name:"India" ,value:"IN", cities:[ "Delhi", "Mumbai" ]}, { name:"Pak" ,value:"PK", cities:[ "Lahore", "Karachi" ]}, { name:"Bangladesh" ,value:"BG", cities:[ "Dhaka", "Chittagong" ] } ] function DropDown() { const[country,setCountry]=useState( {name :"",value:"",cities:[]} ) // let selectectCty = (country.name !="")?country.cities:''; // console.log('===',country) // let finalCityList = countries.filter(ob=>ob.name ==selectectCty); // finalCityList = (finalCityList.length) ? finalCityList[0].cities:[]; // console.log(countries) // console.log('finalCityList==',finalCityList) return ( { console.log(e.target.value); setCountry(e.target.value); }}> { countries.map((item,index)=>{ return {item.name} }) } {/* 2nd dropDown */} { countries[country].cities.map((item,index)=>{ return {item} }) } ) } export default DropDown

[@coderdost]

2 changes 1. const[country,setCountry]=useState(false) // state initial vale make it false 2 . country && countries[country].cities.map((item,index)=>{ // add "country &&" to check for empty country return {item} })

[@tushantkumar2707]

@@coderdost thank you sir its working and sir mujha frontend m 2 saal experience hai or m ab mern stack m jana chta hu or kya recssion m job mile jyagi kya please guide m how to prepare in mern stack 🙏🙏🙏🙏

[@coderdost]

@@tushantkumar2707 More jobs are in frotnend then full stack. So jobwise I don't think fullStack roles will be there. But learning Node is always a plus point. Jobs may be less now but try to work in smaller startups or lesser pay.. as next 1-2 year can be slow.. but there will be eventually be a boom.. and all work experience will matter.