React JS Live Coding Interview 2023 – Cracking the Interview (Mock practice)
Are you preparing for a live coding interview for a React JS position? These interviews can be daunting, but with the right preparation, you can approach them with confidence. One of the best ways to prepare for a live coding interview is through mock practice sessions.
Mock practice sessions give you the opportunity to work through real-world coding challenges in a simulated interview environment. They allow you to showcase your problem-solving skills and demonstrate your ability to write clean, efficient code. Additionally, mock practice sessions can help you identify areas where you may need to improve and focus your study accordingly.
Key Components of a Mock Practice Session
During a mock practice session for a React JS live coding interview, you can expect to work on a variety of coding challenges. These challenges may include tasks such as building a simple React application, debugging a piece of code, or implementing a specific feature using React components and state management.
Mock practice sessions often include time constraints to simulate the pressure of a real interview. This can help you develop time management skills and learn to stay calm and focused under pressure.
Tips for Success
Here are a few tips to help you make the most of your mock practice sessions:
- Practice regularly to become familiar with the types of challenges you may encounter in a live coding interview.
- Seek out feedback from experienced developers to help you identify areas for improvement.
- Focus on writing clean, readable code that demonstrates your understanding of React best practices.
- Work on refining your problem-solving and debugging skills to tackle any issues that may arise during the interview.
Conclusion
Preparing for a live coding interview can be a challenging but rewarding experience. Mock practice sessions provide a valuable opportunity to refine your skills, gain confidence, and ultimately increase your chances of success in your React JS live coding interview.
By approaching mock practice sessions with a positive attitude and a willingness to learn, you can make significant strides in your preparation and ultimately excel in your interview.
Code : https://codesandbox.io/s/delicate-river-8zur7n
Now I feel good that I am not a noob
import "./styles.css";
import { useState } from "react";
const countries = [
{
name: "Pakistan",
code: "PK",
cities: ["Islamabad", "Karachi"]
},
{
name: "India",
code: "IN",
cities: ["Delhi", "Mumbai"]
},
{
name: "Bangladesh",
code: "BG",
cities: ["Dhaka", "Chattogram"]
}
];
export default function App() {
const [_cities, setCities] = useState(countries[0].cities);
const changeHandler = (e) => {
const filtered = countries.filter((item) => item.code === e.target.value);
setCities(filtered[0].cities);
};
return (
<div className="App">
<select onChange={changeHandler}>
{countries.map((item, index) => (
<option key={index} value={item.code}>
{item.name}
</option>
))}
</select>
<select>
{_cities.map((item, index) => {
return (
<option key={index} value={item}>
{item}
</option>
);
})}
</select>
</div>
);
}
Awesome example
const [country, setCountry] = useState({})
return <div>
<select onChange={(e)=>{
setCountry(countries.find(item=>{
return item.value === e.target.value
}))
}}>
{
countries.map((item,index)=>{
return <option value={item.value}>{item.name}</option>
})
}
</select>
<select>
<option>{country.cities.join(" ")}</option>
</select>
</div>
How is this solution sir please reply.
Here is my method. I solved this before watching interview:
import { useState } from "react";
import "./styles.css";
const countries = [
{
name:'India',
value:'IN',
cities:['Delhi', 'Mumbai']
},
{
name:'Pakistan',
value:'PK',
cities:['Lahore', 'Karachi']
},
{
name:'Bangladesh',
value:'BG',
cities:['Dhaka', 'Chittagong']
},
]
export default function App() {
const [countryVal, setCountryVal] = useState();
const [cityVal, setCityVal] = useState();
function handleCountry(selectedCountry) {
setCountryVal(selectedCountry.name);
const [city1, city2] = selectedCountry.cities;
const cities = [city1, city2];
setCityVal(cities);
}
return (
<div className="App">
<select>
{countries.map((country)=> {
return <option key={country.value} onClick={()=>handleCountry(country)} value={countryVal}>{country.name}</option>
})}
</select>
{countryVal &&<select>
{cityVal.map((city)=>{
return <option key={city}>{city} </option>
})}
</select>}
</div>
);
}
😢 after watching it I'm in depression, sir I had finish js, but now I am confused what to do next react or nodes 🥲
I found this to be the easiest solution:
import "./styles.css";
import {useState} from "react"
export default function App() {
const countries = [
{ name: "India", value: "IN", cities: ["Chennai", "Delhi", "Mumbai"] },
{ name: "Pak", value: "PK", cities: ["Lahore", "Karachi"] },
{ name: "Bangladesh", value: "BG", cities: ["Dhaka", "Chittagaon"] }
];
const [cities, setCities] = useState(countries[0].cities);
return (
<div className="App">
<select name="countries">
{countries.map((c) => (
<option key={c.value} value={c.value} onClick={()=> setCities(c.cities)}>{c.name}</option>
))}
</select>
<select name="cities">
{cities.map((city, i) => (
<option value={city} key={i}>{city}</option>
))}
</select>
</div>
);
}
😢😢I experienced that the same question my interviewer asked. I am failed.
import { useState } from "react"
const Problem2 = () => {
const countries=[
{name:'Nepal',
value:'NE',
cities:[
'KTM',
'Lalitpur'
]
},
{name:'China',
value:'CH',
cities:[
'Bejing',
'chingching'
]
},
{name:'Portugal',
value:'PO',
cities:[
'Maderia',
'Lisbon'
]
},
]
const [country,setCountry]=useState()
const[city,setCity]=useState()
return(
<>
<div>
<select value={country} onChange={(e)=>setCountry(e.target.value)}>
<option value="">Select a country</option>
{countries.map(c=>(<><option value={c.value} >{c.name}</option></>))}
</select>
{country&&(
<select value={city} onChange={(e)=>setCity(e.target.value)}>
<option value="">Select a city</option>
{countries.find((c)=>c.value===country)
.cities.map(c=>(
<>
<option value={c}>{c}</option>
</>
))}
</select>
)}
</div>
</>
)
}
export default Problem2
This type of questions are for freshers/experience ?
speak bro
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