FRESHER got nervous in interview🥲 ReactJS mock interview failed

[@SemicolonGuy]

Ye rha codesandbox link : codesandbox.io/p/devbox/hopeful-minsky-ysfk6f Question solve krke comment krke btao

[@rishabhdixit4393]

bhai tume ne mera github and netlify link wala comment delete mara kya ? ,because i am not able to seeit in comment

[@SemicolonGuy]

Nhi bhai lgta hai youtube delete krdeta. Kaafi keh rhe hai

[@anubhabchowdhuryproduction9149]

@@SemicolonGuy import "./styles.css"; import { useState } from "react"; export default function App() { const [count, setCount] = useState(0); function handleCount(count: number) { if (count === 5) { alert("Yay Your seats are booked"); } } function button() { const buttons = []; for (let i = 0; i < 5; i++) { for (let j = 0; j < 5; j++) { buttons.push( { setCount(count + 1); }} key={`${i}-${j}`} > {i} {j} ); } } return buttons; } return ( Rail Tickets available seats on Train Hamsafar express {button()} handleCount(count)}>Confirm booking ); }

[@TARRISHI]

import React, { useState } from 'react'; function TicketBooking() { const [grid, setGrid] = useState([ { seats: 25, category: 'general', bgColor: 'bg-red-600', col: 5 }, { seats: 64, category: 'obc', bgColor: 'bg-green-500', col: 8 }, { seats: 100, category: 'scst', bgColor: 'bg-gray-500', col: 10 }, ]); return ( {grid.map((section, sectionIndex) => ( {[...Array(section.seats)].map((_, seatIndex) => ( {seatIndex + 1} ))} ))} ); } export default TicketBooking; most optimized way to do this problem

[@vishalmangla1832]

@SemicolonGuy here is the code also we can memoise so that unessary render stop import { useEffect, useState } from "react"; import "./App.css"; const App = () => { const [selectedData, setSelectedData] = useState({ vip: [], general: [], economy: [], }); const vip_grid_data = [1, 2, 3, 4, 5]; const general_grid_data = [...vip_grid_data, 6]; const economy_grid_data = [...general_grid_data, 7, 8]; const vip_grids = [ vip_grid_data, vip_grid_data, vip_grid_data, vip_grid_data, vip_grid_data, ]; const general_grids = [ general_grid_data, general_grid_data, general_grid_data, general_grid_data, general_grid_data, general_grid_data, ]; const economy_grids = [ economy_grid_data, economy_grid_data, economy_grid_data, economy_grid_data, economy_grid_data, economy_grid_data, economy_grid_data, economy_grid_data, ]; const handleGridSelect = (type, rowIndex, colIndex) => { const isSelected = checkSelected(type, rowIndex, colIndex); const currentSelectedData = { ...selectedData }; if (isSelected) { currentSelectedData[type] = currentSelectedData[type].filter( (item) => !(item[0] == rowIndex && item[1] == colIndex) ); setSelectedData(currentSelectedData); } else { let count = 0; count += currentSelectedData.vip.length; count += currentSelectedData.general.length; count += currentSelectedData.economy.length; if (count == 5) { alert("you cant select more tickets"); } else { currentSelectedData[type] = [ ...currentSelectedData[type], [rowIndex, colIndex], ]; setSelectedData(currentSelectedData); } } }; const checkSelected = (type, rowIndex, colIndex) => { const currentSelectedData = { ...selectedData }; const currentTypeData = currentSelectedData[type]; const filtereddata = currentTypeData.filter( (item) => item[0] == rowIndex && item[1] == colIndex ); if (filtereddata.length > 0) { return true; } else { return false; } }; const submit = () => { let string = ""; const currentData = { ...selectedData }; for (let i = 0; i < currentData["vip"].length; i++) { string += "vip" + " " + currentData["vip"][i][0] + " " + currentData["vip"][i][0] + " "; } for (let i = 0; i < currentData["general"].length; i++) { string += "general" + " " + currentData["general"][i][0] + " " + currentData["general"][i][0] + " "; } for (let i = 0; i < currentData["economy"].length; i++) { string += "economy" + " " + currentData["economy"][i][0] + " " + currentData["economy"][i][0] + " "; } alert(string); }; return ( {/* */} VIP Section (5x5) {vip_grids.map((item, rowIndex) => { return ( {item.map((value, colIndex) => { return ( handleGridSelect("vip", rowIndex + 1, colIndex + 1) } > {value} ); })} ); })} General Section (6x6) {general_grids.map((item, rowIndex) => { return ( {item.map((value, colIndex) => { return ( handleGridSelect("general", rowIndex + 1, colIndex + 1) } > {value} ); })} ); })} Economy Section (8x8) {economy_grids.map((item, rowIndex) => { return ( {item.map((value, colIndex) => { return ( handleGridSelect("economy", rowIndex + 1, colIndex + 1) } > {value} ); })} ); })} Confirm Booking ); }; export default App;

[@shubhamvyavhare5664]

Important note: Always start with UI first, then decide what states you need. Also initially think about 4-5 minutes about how's gonna be your UI and what states you will be using. So you won't have to change your code again and again. KEEP TALKING WHILE GIVING INTERVIEW, SO INTERVIEWER WILL BE ENGAGED.

[@SemicolonGuy]

Yeeees!

[@sabbir8953]

Instead of statically typed array we can use this simple array method Array.from({length:5}).map((_,idx)=>())

[@AkashChowdhuryAkash]

True

[@naimurrahman1406]

new Array(5).fill(new Array(5).fill(0))

[@studyplanet4656]

One of the best interview video , i build it and it is working fine . Keep making videos ...

[@sanujasethi6286]

This is actually tough those who are fresher.You can go for easy questions first and make them comfortable then you can ask this type of questions.

[@SemicolonGuy]

I do this in JS round but for machine coding, i will ask the question only

[@jhonsnow534]

bhai fresher se basic ke saath output ya js ke ques poochne chaiye :(

[@SemicolonGuy]

Hmmm. But ab sabne ratta marlia hai to application based questions laane pad rahe hai

[@Amaterasoo]

serious question: when i can do this with ai in literally minutes why should we go through this hassle ? and i can make it much better with the help of ai so why not?

[@SemicolonGuy]

It is possible to develop a product with AI, but when it comes to building a product, there will be tasks that are specific to that product. In a company, you will be building a product and that requires you to have a basic understanding of technology. Only then will you be able to find the best technical solution for your product. Additionally, debugging hundreds of coding files is currently difficult with AI. Having a good understanding of a product means you can solve technical problems more easily.

[@vishalraj1834]

ek constant folder bna lo . jis mai array of object bna lo aur use state mai pass ke do rendering UI with map , colour change krne ke liye ek function bna lo(id pass kr dena ), ek store bna lo with redux react for tracking which seat and how many seat you have booked . kis kis ko lagta h yeh theek h

[@SemicolonGuy]

Store kyu bnana hai?

[@vishalraj1834]

@@SemicolonGuy stor can help to limit number of seat or can use to count the number of seat..

[@hinata1066]

especially store should made when your app is complex and multiple components have to the power to manipulate it, but in this case. you can just exploit useState hook, like think of it as: when you create a form so your input fields value is initially ""(empty). and then you update it by setState method

[@vishalraj1834]

@@hinata1066 tujhe ab car banana hai toh tu 3 tyres bhi use kr sakta aur 4 tyres ko bhi use kr sakta .. tu bta kon si best car rahegi..?

[@ErrorX.]

@@vishalraj1834 you can use context api too redux store is for complex projects

[@HBCGAMING]

I have to delete my 400 lines of code due to one wrong approache.That,s why now i always thinking before to implement features specially those edge cases!.

[@SemicolonGuy]

Yeees! This is very important

[@shreyaspapinwar2745]

Your attitude towards asking questions during the interview, such as 'You won't get this, why don't you understand it?', is very inappropriate. I dont think any fresher should work in this type of environment.

[@SemicolonGuy]

Ye baat bohot bolte hai merko sab. But bhai mujhe unko WORST ke liye prepare krna hai. Agar Mai yha aakar pyaar se baat krunga to unko weak point kaise btaunga. Verdict se pehle Mera role hi ye Hai ki mujhe unko WORST ke liye prepare krna hai

[@AshutoshKumar-e5g]

​@@SemicolonGuyto fir select kr leta 😅

[@AshishVerma-yu8hp]

Sir i m in 12th i m currently learning web development completed html in 4-5 days . I really love ur videos hope i will be there soon ❤❤❤❤❤

[@SemicolonGuy]

Wow very nice! Are you enjoying this journey?

[@kush501]

sir so actually i could solve ths question within 30 to 45 min ,like the hint which u gave using 2 day arrays that was much needed which took time but when i sw your optiised solution it's looks bit tricky for me 😭😭 so my question as a fresher (im still in 3rd year ) shld we go till the optiised solution ??

[@harshsuthar8395]

Machine coding round me reactjs ka use karne deti he company?? Ya only vanilla js hi use hota he?

[@rishikeshwagh392]

Older way of vanilla js se react ke component banoge to pura din nikal jayega bhai. Codesandbox se ho jayega.

[@ayanchatterjee9601]

Bro can u help me how can i improve my skills regarding this currently learning basic of react , hooks , use state , usecontex, use effect

[@ajaydhiman9775]

Make projects, that’s the only way

[@SemicolonGuy]

Yes Ajay is right. Projects banao bhai khud se. Help km lena projects bnate time

[@ayanchatterjee9601]

@@SemicolonGuy khud se try karta but bohot syntax kavi kavar bhul jata phir dekhna padta

[@SemicolonGuy]

MOCK interview ke liye apply krna hai to comment krke btao. Mai reply me link bhejdunga apply ke liye

[@udaywahi]

Ha bhai mera interview ek baar lelo maine 3 year MERN stack pe kaam kiya hai still interview ke time confidence nhi aata

[@piyush5070]

bro, how can i prepare myself for this type of question, what i need to do or learn to solve these type of questions or problems

[@jhonsnow534]

@@piyush5070 big frontend aur great frontend interview pe mil jaenge

[@SemicolonGuy]

Ye do platforms hai and ek aur Indian platform hai but abhi tk use nhi kia maine. Tum use krke btao kaisa hai vo : devtools.tech

[@heartlyintruder]

the question was easy i guess the guy got nervous

[@Dr.dhumketuIITDholakpur]

Bhaiya maine bna to diya tha but logic sochne mai debug karne mai code karne mai 3 hrs lag gye lol , yeah mai aapki har video dekh lunga interview walo and i am sure aapki videos se changes to aainge bacause aap aache question puchte ho aaise question to bhout bdiya hai bakiyon ki tarah nahi reconciliation, virtual dom

[@SemicolonGuy]

Ha bhai maine ye questions isliye hi start kiye hai kyuki mai chahta hu real world problem hi puche hum.

[@Dr.dhumketuIITDholakpur]

@@SemicolonGuy ham please bnate raho mai to kuch dino se apke problems solve kar raha hun like infinite comments wala wo cars24 wala aaise bhout se and mai apki interview ke saare videos complete karne wala hun😤

[@SemicolonGuy]

@@Dr.dhumketuIITDholakpur wow. Btana mujhe kya improvement aayi uske baad

[@Dr.dhumketuIITDholakpur]

@@SemicolonGuy yeah sure

[@AshutoshKumar-e5g]

Bhai intern ko seekhaya jaata hai he is not experienced .. to think like experienced guy he have to gain experience

[@deepak420re4]

Hello sir i know concepts of js like event loop, prototypical inheritance, asynchronous, hoisting, execution content,this,call,bind, apply but i want to go in these more deep as i saw some questions there my knowledge is just half . I want to do that while building projects any resources which get help me to dive above topics more perfectly

[@SemicolonGuy]

Ye sb topic Debugging me help krte hai. Inko khud se code me implement krke dekho. Code se saath khelna start kro. Example : Event loop ke liye bohot saare timeout, setinterval aur promises likho and answer predict kro. Agar shi nhi aya to dekho kyu nhi aya. Chatgpt se puchlo

[@deepak420re4]

@@SemicolonGuy thanks sir 🙂 I will go and try that!

[@thehappyguy2816]

took me 45 minutes , im literally a fresher with 1 yr

[@SemicolonGuy]

Bhai tumne phle 20 minutes likha tha na? 😁

[@thehappyguy2816]

@@SemicolonGuy haan bhai, pr vo sirf mapping key liye tha, pr booking ke liye ar usko window.alert mein show krne ke liye 25 min lage😭

[@qxħ]

What did you suggest for 11th grade starter in web dev in react js. I know basics of html css and java script. Im bug bounty hunter too.

[@POLFWEB]

SIR I HAVE A QUESTION CAN IN INTERVIEWS JS OOPS CONCEPTS ARE ASKED OR NOT I PROBABLY SAWED INTERVIEWS MANY BUT NOT ANYBODY ASKING.

[@SemicolonGuy]

There is no OOPS concept in JS, that's why Noone will ask

[@POLFWEB]

@@SemicolonGuy thanks for remainder i forgot that it is just synthetic sugar 😕 behind the scenes everything is object

[@bohnydua8676]

not able to think, sir/anyone just little bit of hit to approach to selecting the seat with number row how ?

[@shubhamvyavhare5664]

3 arrays for each type of seat. Another seperate array for selected seats (If it's size is more than 5, show message limit exceed). Now I think it's pretty easy question :)

[@SemicolonGuy]

Shubham is always very kind and helpful. Thanks for everything

[@themanifesto10]

Hum first hum first

[@SemicolonGuy]

Chaabi milgyi na?

[@rengokukyojiro3290]

I want to give this mock interview

[@codingwave56]

i want to apply for mock interview.

[@SemicolonGuy]

Yha se apply krlo : whatsapp.com/channel/0029VaIZR09JJhzUFR2UpC12

[@RoroZoro-lf4nz]

These are too easy questions. Bring someone more talented and ask more challenging questions please 😂. PS I did it in ~ 10 minutes

[@sofisalman2135]

I solved this problem

[@SemicolonGuy]

Kitna time Lia tumne?

[@CodeWithSumo]

Mujhe bhi dena hai interview

[@SemicolonGuy]

Yha apply krlo whatsapp.com/channel/0029VaIZR09JJhzUFR2UpC12

[@sagarkumargupta3071]

You failed as a interviewer.

[@SemicolonGuy]

Please help me in succeeding

[@SemicolonGuy]

How can I improve?

[@thehappyguy2816]

@@SemicolonGuy nah bro they are just too dumb for this and think that solving output based qst will get them a job🤡

[@RoroZoro-lf4nz]

​@@SemicolonGuy You must have failed because you asked too easy questions 😂

[@Yyaghs]

Mein kar dia ye pose karke

[@SemicolonGuy]

Kitna time lga?

[@Yyaghs]

@@SemicolonGuy Aprox 60 mints may be. Ak jagah syntax dekha tha google pe mein. Q ki yaad nhi tha. Par mein apki pura question na sunke start kar dia tha. To 5*5 mein 1-25 seats hoga na to seat no print karawa only. Row and column nhi.