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

[@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

[@gauravdwivedi-h5t]

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]

😂😂

[@dheerajsingh568]

Apna bana hai😂😂😂

[@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.

[@shubhamgoyal1547]

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

[@stefumies]

Getting the candidate to explain also filters out the pure recall knowledge from the actual understanding.

[@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

[@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.

[@subhasisdas9916]

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

[@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

[@ahndeux]

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

[@k303k]

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

[@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 👍🏻

[@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)

[@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❣️

[@Chandrashekhar_5555]

@Portal Solve yes go for it

[@siddharthjoshi3328]

​@Portal Solve Abhi tak explain nahi kiya

[@thequantum-plator]

@Portal Solve jab aata nhi h toh udna mat

[@Cyrus_San]

@@Chandrashekhar_5555 Can I explain it ?

[@aparnas1613]

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

[@coderdost]

Great

[@arpityadav7290]

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

[@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} ))} ); }

[@quickgyan5152]

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

[@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

[@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.

[@dheerajsingh568]

Just do, {country && {countries[country].cities.map(city => {city})} }

[@How2-port8080]

Great for helping students..🙏

[@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 😁

[@AyushRawat-v8m]

{country && { countries.filter(({value}) => value === country).flatMap((filteredCountry)=>filteredCountry.cities).map((city)=>{ return {city} }) } } chaining for second list and conditional render piece of cake

[@ARUNK-m7j]

const [country,setCountry]=useState(0) this is the best way to initialize for the above code, instead of object with empty values

[@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

[@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

[@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

[@pankajsuryavanshi8332]

Waiting for next episode. Saved this playlist

[@littleshorts6969]

*15 mins and a government website*

[@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,

[@iftekhar_ansari]

Take index instead of taking value

[@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.

[@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 ?

[@vikhyatsingh9434]

I thought he had to make one dropdown and on selecting any item, there should be another dropdown attached to that option. But he made two separate dropdown

[@Coder900]

Yes that was a good solution but there was a mistake that he did. He used country'sIndex as a value in second selectbox and you can check when he's selecting pak then karachi is automatically getting selected. Thats a note for viewers too although I know manny of you have figured it out. Great work though

[@hashirmughal5625]

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

[@bardenishi4312]

Outstanding !

[@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

[@JonnyWarker-y7d]

The intervewee is really great

[@malag6358]

Can You make Vedios for 3+ years Problem Solving Interview Questions

[@mark-cr4by]

Nice thats a lot of pressure

[@AhmadKhujair]

i thought you were asking for nested type dropdown

[@coderdost]

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

[@musicinc7851]

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

[@DESTRUCTION1347]

Sidha filter lagate aap second map ka new array aata uspe

[@shardulchaudhary3366]

I cracked internship with your help

[@technicalrobot9685]

The Correct Answer: import "./App.css"; import {useState} from "react"; const countries = [ { name: 'India', value: 'IN', cities:[ 'Delhi', 'Mumbai' ] }, { name: 'Pak', value: 'PK', cities:[ 'Lahore', 'Karachi' ] }, { name: 'Bangladesh', value: 'BD', cities:[ 'Dhaka', 'Chittagong' ] }, ]; function App() { const [country, setCountry] = useState(0); return ( { console.log(e.target.value); setCountry(e.target.value); }} > --Select Country-- { countries.map((item, index) => { return {item.name} })} { countries[country].cities.map((item, index) => { return {item} })} ); } export default App;

[@user121304]

Thanks! I have a question, What does countries[country] mean? I read the comments and it said he used it for index. I tried to change it to i or index and I am getting undefined error. Why is it so? Please explain. Thanks :)

[@technicalrobot9685]

@@user121304 you have to initialize accordingly useState() function for that

[@turantech]

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

[@VishalSharma-rn7mt]

Awesome example

[@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

[@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?

[@vinothkumarv9722]

Its Awesome :) thanks sir

[@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..

[@ForLearning-jf1li]

please make some more videos like this

[@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.

[@AhmadRaza-uo8ze]

Now I feel good that I am not a noob

[@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.

[@asifali_official3137]

great work sir ❤

[@mythic_binod]

Huh he cracked interview ? It's a basic syntax error he closed the second select option without passing the props

[@MuhammadBilal-hq3xn]

Great I love this.

[@bloggerayush8550]

for what LPA, we can expect this question??

[@abhayverma7080]

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

[@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.

[@gauravdwivedi-h5t]

Do we really need useEffect in this code?

[@adeelkhizar5793]

Good job🎉

[@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

[@code_kraft7]

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

[@ayskantmishra7377]

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

[@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.

[@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

[@atikhasan280]

It's BD not BG. Thank you, sir.

[@osama-ki_masi-ki_pota7677]

He is from iter

[@randisa3600]

ARC Tutorial??

[@jatinraval16]

it's very simple question;

[@premprem4095]

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

[@Pankajdutt14]

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

[@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

[@Factvideo014]

New challenge for me🤔

[@abhisheknavgan6829]

bro be giving me anxiety by that select tag error

[@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

[@honeydmaxx]

ChatGPT can do this why should i?

[@saurabhmaurya4199]

chatgpt need job or you??

[@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

[@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

[@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.

[@Yue-sx2em]

good job

[@_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

[@sumit7473d]

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 ??

[@sumit7473d]

@@coderdost yes sir,without any predefined method.

[@sumit7473d]

@@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)

[@techy_kuldeep]

import React from "react"; import "./App.css"; const countries = [ { name: "India", value: "IN", cities: ["Delhi", "Mumbai"] }, { name: "Pakistan", value: "PAK", cities: ["Karachi", "Lahore"] }, { name: "Bangladesh", value: "BAN", cities: ["Dhaka", "Bangladesh"] }, ]; function App() { const [cities, setCities] = React.useState([]); return ( { console.log(e.target.value); setCities(e.target.value.split(",")); console.log(cities); }} > {countries.map((item, index) => { return {item.name}; })} {cities.map((item, index) => { return {item}; })} ); } export default App;

[@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.

[@zakishaikh3201]

This is for freshers I thing

[@PIYUSH-lz1zq]

in codesandbox can we save the code there itself ??

[@coderdost]

Yes.

[@penaidtaskmanagement]

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

[@coderdost]

stackblitz.com/edit/angular-wfmpqq

[@ManojKumar-us5fz]

Stop calling Sir/Madam its interview

[@Java_React_fullstack]

kzbin.info/www/bejne/ham6epR9rpuCrNksi=JtspeOUs-ukpeHCr Reference material on graphql

[@thanniruanilkumar8232]

This interview fresher level or Experience level

[@shoiabalam2170]

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

[@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

[@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.

[@Dopamine432]

speak bro

[@sohebshaikh3344]

Mazaa Ayaa