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

Is this ok guys ?
import {useState} from 'react'
function App() {
const countries = [
{name:'India', value:'IN', cities:['delhi','mumbai']},
{name:'Pakistan', value:'PK', cities:['Lahore','Karachi']},
{name:'BanglaDesh', value:'BG', cities:['DHAKA','CHi']}
]

const [country,setCountry] = useState();

const handleChange = (e) =>{
const country = countries.find(item=>
(item.value === e.target.value)
)
setCountry(country)
};


return (
<div className="App">
<select onChange={handleChange}>
{countries.map((item,index)=>(
<option value={item.value} key={index}>
{item.name}
</option>
))
}
</select>

{country && (
<select>
{country.cities.map((item,index)=>{
return(
<option value={item} key={index}>
{item}
</option>
)
})}
</select>
)
}

</div>
);
}

export default App;

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.

This interview fresher level or Experience level

This is for freshers I thing

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

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

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?

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

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

function App() {
const [countries, setCountries] = useState([{
name:"India" ,value:"india", cities:["pune","mumbia","patna"]
},
{
name:"nepal" ,value:"nepal", cities:["pokra","katmandu","dharan"]
}
,{
name:"pakistan" ,value:"pakistan", cities:["lahore","islamabad","rawalpindi"]
}])
const [selectedCountry,setSelectedCountry]=useState([])


function handleSelect(e){
const selectedIndex=e.target.value
const selectedCountryData=countries[selectedIndex]
setSelectedCountry(selectedCountryData.cities)

}




return (
<>
<select onChange={(e)=>handleSelect(e)}>
{countries.map((e,index)=>(<option key={index}value={index}>{e.name}</option>))}
</select>
<select>
{selectedCountry.map((e,index)=><option key={index}value={e}>{e}</option>)}
</select>
</>
)
}
not optimised but easy

There are 3 ways to solve this

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

❤❤❤❤

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

He is from iter

done sir

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

import {useState} from 'react'
import './App.css'

const coutries = [{ name: 'india', value: 'in', cities: ['pune', 'mumbai'] },
{ name: 'pak', value: 'pk', cities: ['lahore', 'karachi'] },
{ name: 'banglades', value: 'ban', cities: ['chitograh', 'dhaka'] },
]


export default function App() {

const [citiesarray,setcites]=useState([])
const setcountry = (e) => {
console.log(e.target.value)
let b = coutries.filter((name) => {
return name.name==e.target.value
})
setcites(b[0].cities)
}
return (
<>
<select onChange={setcountry} selected='Set country'>
{coutries.map((e) => (
<option>{e.name}</option>
))}
</select>
<select>
{citiesarray.map((e) => (
<option>{e}</option>
))}
</select>
</>
)
}

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 (
<div className="App">
<select
onChange={(e) => {
console.log(e.target.value);
setCities(e.target.value.split(","));
console.log(cities);
}}
>
{countries.map((item, index) => {
return <option value={item.cities}>{item.name}</option>;
})}
</select>

<select>
{cities.map((item, index) => {
return <option value={index}>{item}</option>;
})}
</select>
</div>
);
}

export default App;

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

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

Is this expected from a fresher for on campus placement?

Mazaa Ayaa

Poor process of interviewing, feature is something everyone can create reather ask him core javascript and react concept.
This seems like school or College exam,such a poor interview process.

How to practice for these kind of machine coding rounds

Are these real coding interviews

import "./styles.css";
import { useEffect, 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"] }
];

export default function App() {
// state to store the value of the country
const [country, setCountry] = useState([]);

useEffect(() => {
console.log(country[0]);
console.log(country[1]);
}, [country]);

return (
<div className="App">
{/* 1st DropDown */}
<select
value={country}
onChange={(e) => {
console.log(e.target.value);
setCountry([e.target.value]);
}}
>
{countries.map((item, index) => {
return (
<option key={index} value={index}>
{item.name}
</option>
);
})}
</select>

{/* 2nd DropDown */}

<select>
{countries[country] &&
countries[country].cities.map((item, index) => {
return <option value={index}>{item}</option>;
})}
</select>
</div>
);
}

Sir ! A small doubt here why we need countries [country] && in second select drop-down tag please clarify my doubt sir

Nice thats a lot of pressure

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 (
<div className="App">
<select onChange={(e)=>changeStates(e.target.value)}>
{
array.map((item,index)=>(
<option value={item.value}>{item.country}</option>
))
}
</select>
<select>
{
state.map((item)=>(
<option value={item}>{item}</option>
))
}
</select>
</div>
);
}
I tried

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

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 (
<>
<select
value={country}
onChange={(e) =>{
console.log(e.target.value);
setCountry(e.target.value);
}}
>
<option>--Select Country--</option>
{ countries.map((item, index) => {
return <option value={index}>{item.name}</option>
})}
</select>

<select
value={country}
>
{ countries[country].cities.map((item, index) => {
return <option value={index}>{item}</option>
})}
</select>

</>
);
}


export default App;

Great for helping students..🙏

I think question was expected such kind of answer !


export const AutoDisplayCity = (props) => {
const [countryValue, setCountryValue] = useState();
const Countries = props.CountriesArray;
const countryHandler = (e) => {
setCountryValue(() => {
return Countries.filter((cntry) => cntry.value === e.target.value);
});
};

return (
<>

<select onChange={countryHandler}>
<option>--Select Country--</option>
{Countries.map((country) => {
return (
<option key={country.value} value={country.value}>
{country.name}
</option>
);
})}
</select>
{countryValue && (
<select>
{countryValue[0].cities.map((city) => {
return <option key={city}>{city}</option>;
})}
</select>
)}
</>
);
};

Can anyone explain counteries[country].cities

Its Awesome :) thanks sir

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

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

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?

is thisa correct answer

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

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 🙏

itne easy interview bhai 😂😂

great work sir ❤

Easy problem

Is it the right answer?