React JS interview 2023 Live Coding Round (Mock)

Рет қаралды 286,182

Жыл бұрын

Never faced React JS live coding round? You can experience React JS Interview Live coding round where a candidate is asked to build a UI component. #reactjs #javascript #interview #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

Пікірлер: 131

@prakashbanjade4374 Жыл бұрын

The simple approach is that you can create another component for your list-item and in that component declare the isChecked state.

@aniket-in Жыл бұрын

Exactly, that way the logic is separeted, and I think's that's one of the main reason of using React.

@bishwajeetpandey1570 Жыл бұрын

@@aniket-in can you please share the code on this logic

@anshulvairagade1604 Жыл бұрын

@@bishwajeetpandey1570 import { useState } from "react"; import List from './List' const App = ()=>{ const arr = ['play games', 'read book', 'play chess'] const [arr1, setArr1] = useState(arr) const handleDelete = (idx)=>{ setArr1(arr1.filter((item, i)=> i!==idx)) } return ( { arr1.map((item, idx)=>( handleDelete(idx)} item={item}/> )) } ) } export default App; import { useState } from "react"; const List = ({onDelete, item})=>{ const [checked, isChecked] = useState(false) return ( < input type="checkbox" checked={checked} onChange={(e)=>isChecked(e.target.checked)} /> {item} { checked && X } ) } export default List;

@bishwajeetpandey1570 Жыл бұрын

@@anshulvairagade1604 every thing is seems readable and fine but why u passed item prop from App component to list component

@anshulvairagade1604 Жыл бұрын

@@bishwajeetpandey1570 item means the element of our array, and that arrar is present in App component, and we are using that particular element and printing it using another list component. To add more logic into it i.e adding check box etc I hope this helps

@bishwajeetpandey1570 Жыл бұрын

This is my solution of this problem import { useState } from "react"; const arr=["Apple", "Orange", "Banana"] export default function App() { const [fruitsArr, setFruitsArr] = useState([...arr]); const [chkBoxStates, setChkBoxStates] = useState(arr.map(()=>false)); const deleteClickHandler = (index) => { alert(index); const filteredArr = []; for (let i = 0; i < fruitsArr.length; i++) { if (i !== index) filteredArr.push(fruitsArr[i]); } setFruitsArr(filteredArr); }; const handleCheck = (isChecked, index) => { setChkBoxStates((prevArray) => { const newArray = [...prevArray]; // create a new array based on the previous state array newArray[index] = isChecked; // modify the element at the specified index return newArray; // return the new array as the updated state value }); }; return ( {console.log("render")} Hello Codeandbox Start editing to see some magic happen! {fruitsArr.map((element, index) => { return ( handleCheck(e.target.checked, index)} >{" "}    {element}          {chkBoxStates[index] && ( deleteClickHandler(index)}>Delete )} ); })} ); }

@webber5629 Жыл бұрын

But the problem is when i click the checkbox for first item then it's delete button shows and after deleting that item the checkbox for second item is automatically checked and so on.

@sui16chillax75 Жыл бұрын

***child component*** import React, { useState } from 'react' export const HobbyList = (props) => { const [checkBox, setCheckBox] = useState(false) const handleCheckBox = ()=> { // console.log(!checkBox); setCheckBox(!checkBox) } return ( {props.hobby} {checkBox ? props.handleDelete(props.hobby)}>delete : null} ) } **parent component** //neglect the commented code , this is my create app for solving the interview questions import { useState } from 'react'; import './App.css'; // import { CountriesDropdown } from './CountriesDropdown'; import { HobbyList } from './HobbyList'; // import { InputDisplay } from './inputDisplay'; // import Register from './Register'; function App() { const hobbies =["playing", "singing","kapring" ] const [hobbiess, setHobbies] = useState(hobbies) // you only have to show the delete button when checkbox is checked const handleDelete =(hobbo) => { const hob = hobbiess.filter(hobby => hobby!== hobbo) setHobbies(hob ) } // console.log(countries); return ( {hobbiess.map(hobby=>)} {/* */} {/* */} {/* */} ); } export default App;

@pankajpundir6256 Жыл бұрын

To implement this task first you will have to add ischeck key inside the copyarr through map and then pass index and target value through handlechnage function .arr[index] ={..arr[index], ischeck=!arr[index].ischeck !ischeck} and then you make a condition inside the jsx that ischeck==true && Delete

@bardenishi4312 Жыл бұрын

Amazing..... what the helpful video you are making!

@lipinkariappa3550 11 ай бұрын

i haven't learnt react yet, but ig a simple vanilla js script for deleting part would be this: const buttons = document.querySelectorAll('li button') buttons.forEach((button)=>{ button.addEventListener('click',(event)=>{ event.target.parentNode.remove() }) })

@galax5130 10 ай бұрын

check could be a object or object of arr assign to check state when bool and index were saved and then access the obj according to it.

@vinothkumarv9722 Жыл бұрын

Well he is tried nicely very good :)

@chillpill610 Жыл бұрын

pl. continue this series , upload videos weekly , help many aspirants

@bekizodcancer3657 6 ай бұрын

in order to render the updated list when the delete button click why not we can use useState hook for the arr array list...any suggestion?

@rizkydjanuar2809 Жыл бұрын

Easy to solve, u can create a component that return a state(it`s called children as a function or if u familiar with callback is same method). Then u can use it after mapping so u create a seperate state and then u can use it to handle show delete button

@rizkydjanuar2809 Жыл бұрын

import React, { useState } from "react"; const hobbies = [ { id: 1, nama: "Main gitar", }, { id: 2, nama: "Nonton", }, { id: 3, nama: "Main Game", }, ]; type CheckboxProps = { checked: boolean; setChecked: React.Dispatch; }; type WrapperCheckboxProps = { children: (props: CheckboxProps) => React.ReactNode; }; const WrapperCheckbox: React.FC = ({ children }) => { const [checked, setChecked] = useState(false); return {children({ checked, setChecked })}; }; function App() { const [newArr, setNewArr] = useState(hobbies); const handleDelete = (id: number) => () => { const newFilteredArr = newArr.filter((val) => val.id !== id); setNewArr(newFilteredArr); }; return ( Hobbies {newArr.map((el) => ( {({ checked, setChecked }) => ( {el.nama} setChecked(e.target.checked)} /> {checked && Delete} )} ))} ); } export default App; my solution

@amitsahgal3347 11 ай бұрын

@@rizkydjanuar2809 u made it 100 times complex

@mitulbhadeshiya480 Жыл бұрын

Thanks for such a good tutorial

@abnow1998 8 ай бұрын

I would have used useReducer Hook to handle checkbox value for that particular input and trigger delete if selected. Simple!!

@pratiksavaliya3890 Жыл бұрын

create child component for each item and manage check state inside that component for each individual list item.

@vaskarchandradas3565 Жыл бұрын

❤U r right brother😊

@anshulbhorde7712 Жыл бұрын

export default function App() { const [data, setData] = useState(["A", "B", "C"]); return data.map((label, i) => ( setData(data.filter((name) => label !== name))} key={label} label={label} /> )); } function Root({ label, onDelete }) { const [checked, setChecked] = useState(false); return ( setChecked(e.target.checked)} type="checkbox" /> {label} {checked && delete} ); }

@supriyasaha5234 Жыл бұрын

Awesome 😍

@bishwajeetpandey1570 Жыл бұрын

Wow upload more videos on interview coding round.

@shayanalijalbani9894 Жыл бұрын

You can create a one sate like: const [checkedInputs, setCheckedInputs] = useState([]); And then add the current index + checkedInputs to checkedInputs state like setCheckedInputs([... checkedInputs, index])

@proeditz108 7 ай бұрын

He can create an another component for every list item and pass the props for every single list item. Thanks.... 😂😂❤❤

@Kakashi-ek1ju 9 ай бұрын

How much salary a guy can expect from this level of interview

@tech.corner Жыл бұрын

Amazing..

@subhajit3316 11 ай бұрын

He has lifted the state up i.e state controlled by parent that why when he click another checkbox check become false and button disappeard The solution is that he has to create diff state for diff children

@VishalSharma-rn7mt 6 ай бұрын

Awesome

@ByteSights Жыл бұрын

Just use input type checkbox and label

@anubhav.codess 6 ай бұрын

Delete can be done with the help of splice

@shivmooratyadav5732 Ай бұрын

@Hitesh Choudhary , best teacher 🎉🎉 thank you sir.

@purusharma8192 Жыл бұрын

Sir your videos are very useful and you also remains cool and calm

@sagarmehta9624 Жыл бұрын

You can use bubbling here

@anirbandas12 Ай бұрын

delete an elem from arr .. let's use filter .. yeah .. if an item is at the last position we need to iterate the whole array and filter ... hmm.. very efficient

@user-pj9ny2vt2l 8 ай бұрын

he did in very complicated way

@aveenism 8 ай бұрын

is it for fresher or how many experienced level question

@shailenderjaiswal1685 8 ай бұрын

this is very nice

@nk-bq6xy 7 ай бұрын

Sir, from were can i get this type of questions

@freentechcoder9120 5 ай бұрын

Lets Try to Correct His Logic import { useState, useEffect } from "react"; import "./styles.css"; const test = ["1", "2", "3"]; export default function App() { const [arrcopy, setArrCopy] = useState(test); const [checkboxArr, setCheckBoxArr] = useState( Array(test.length).fill(false) ); const HandleChecbox = (isChecked, Iteam) => { setCheckBoxArr((prevCheckboxArr) => { const newArr = [...prevCheckboxArr]; newArr[Iteam] = isChecked; return newArr; }); console.log(checkboxArr); }; const handleDlete = (ItemIndex) => { let newArr = arrcopy; let filterarray = newArr.filter((item, index) => { return index !== ItemIndex; }); setArrCopy(filterarray); }; return ( Hello CodeSandbox Start editing to see some magic happen! {arrcopy.map((item, index) => { return ( HandleChecbox(e.target.checked, index)} /> {item} {checkboxArr[index] && ( handleDlete(index)}>DeleteButton )} ); })} ); }

@sharoonps4285 11 ай бұрын

Sir how i can I build logic in react 😊..some one help me

@user-pj9ny2vt2l 8 ай бұрын

input pain click nahi change event lagta hain

@WeakCoder Жыл бұрын

Sir, should we expect these kind of questions for a 2 yrs exp IT person ? Or much harder than this ?

@coderdost Жыл бұрын

if someone is taking a live interview you can expect a similar level. But otherwise a little more harder will be there. Live meaning someone checking while you are coding... but sometime they just given questions and expect you to submit in 2 hours etc. Then it will be much harder.

@kt3030 6 ай бұрын

These questions can asked for fresher ?@@coderdost

@blackpurple9163 Жыл бұрын

Interview me ese hi questions puchhte he kya? For freshers? I'm applying for MERN stack

@coderdost Жыл бұрын

They may ask simple conceptual questions also as given in this playlist : kzfaq.info/sun/PL2PkZdv6p7ZnxpstmVUbybt5M9hjTayY_ These type of questions are asked in companies which take some time to evaluate candidates for React skill - otherwise they may ask even plain programming question or DS question. There is no set rule

@satyaranjanbehera Жыл бұрын

for reactjs coding from where to prepare?

@coderdost Жыл бұрын

I think there is no good question sets available. generally better to work on some small projects. that itself is a good practice.

@sui16chillax75 Жыл бұрын

very simple question, god did it very first try , so i think god is god always right

@anuragtiwari6910 Жыл бұрын

please share codesanbox link of such mocks

@coderdost Жыл бұрын

codesandbox.io/s/long-leaf-pwxu4i

@roxxxxxy Жыл бұрын

chatgpt be like: bas itna hi abhi kar deta hu

@coderdost Жыл бұрын

🤣

@vivekkumar-pc1xy Жыл бұрын

thanks, very informative video

@swapnaar5329 Жыл бұрын

Hi Vivek, do you know any telugu reactjs developers or full stack developers in india? Please let me know if they need any extra income.

@onething...4866 Жыл бұрын

why you not complete the answer ?

@coderdost Жыл бұрын

candidate only coded till that point

@hitman5161 Жыл бұрын

How can i give the mock interview to you

@coderdost Жыл бұрын

Generally we release a form on channel community

@gorikhanna6070 Жыл бұрын

@@coderdostcan u plz tell me how to give mock interview to u ???

@coderdost Жыл бұрын

@@gorikhanna6070 We put up a from on community post for mock interviews. you can apply once that is available.

@iamdevil9485 11 ай бұрын

which software is he using?

@coderdost 11 ай бұрын

Online code editor. Syncfiddle

@karanbhoite9552 Жыл бұрын

Experience???

@coderdost Жыл бұрын

Fresher

@zaneyt3791 Жыл бұрын

It's easy for me

@shreyanshmishra6613 Жыл бұрын

Do it without react with vanilla js

@zaneyt3791 Жыл бұрын

@@shreyanshmishra6613 for sure brother

@yikanaveen Жыл бұрын

Sir , i'm doing BBA from regular private college and I have skill in MySQL ,php, javascript,html , css so can I get job in it sector? Please tell me

@coderdost Жыл бұрын

PHP is still used but competition is high, from old developers. You will have to try with some internships at a company where they use PHP or some PHP based framework. Laravel is top framework these days. PHP is not high paying initially, but it is a widely used language still.

@yikanaveen Жыл бұрын

@@coderdost sir i know i asking that i am BBA student so can i get jobs in it sector if i had THAT skills

@vk19148 Жыл бұрын

@@yikanaveen kyu nahi...companies ko bus skills chahiye...Projects banao aur dikhaao

@coderdost Жыл бұрын

@@yikanaveen Yes, however your first job will be hard to crack in traditional IT companies which filter based on degreee and field. So you have to try for startups and companies which are remote work based and looking for skills rather than background of degree. After first job, things change.. and experience matters.

@harrycullen863 Жыл бұрын

Is this for freshers or experience

@coderdost Жыл бұрын

Freshers. But for some for experienced dev also they ask simple question initially and then ask to add something to it.. live interviews …dont have very hard questions .. hard ones are given in take home assignments or machine round without a live interviewer

@mauliingle8322 6 ай бұрын

chai aur code

@jeth2600 Жыл бұрын

I want to know about that it's scripted or not. Or The student already know the question.

@coderdost Жыл бұрын

No student is joining live

@jeth2600 Жыл бұрын

@@coderdost TQ for reply And he can use Google.

@sarojregmi200 Жыл бұрын

will it be considered a pass ??

@coderdost Жыл бұрын

Depends on post, for fresher level it is PASS. as only few ppl can really code in live situation and limited time.

@mayankmisra00 10 ай бұрын

hi sir can you give the solution of that problem ? function sayHello(){ console.log("Hello"); } function sayHi(){ console.log("sayHi") } function add(a,b,fun){ sayHello() sayHi(10) console.log(a+b) } add(10,20,sayHello) here i can call the sayHi() fuction in the add function()

@jayeshmahajan4213 9 ай бұрын

i guess sayhi() fun no console any value because its not access in fun add

@shayanalijalbani9894 Жыл бұрын

It's a good practice to create a state like const [state, setState] = useState() And not like this const [state, setName] = useState()

@jayanth9445 10 ай бұрын

@stan1slav937 Жыл бұрын

Wow, so basic problem and he cant resolve it , very weak guy

@coderdost Жыл бұрын

live coding makes people nervous, specially when other person is looking every second.

@nitishgupta8393 Жыл бұрын

my solution: import "./styles.css"; import { useState } from "react"; export default function App() { const arrInp = [ { id: 1, item: "task1" }, { id: 2, item: "task2" }, { id: 3, item: "task3" }, { id: 4, item: "task4" } ]; const [completed, setCompleted] = useState([]); const [arr, setArr] = useState(arrInp) const handleCheck = (e, id) => { if (e.target.checked && !completed.includes(id)) { setCompleted([...completed, id]); } else { let ind = completed.indexOf(id); let newArr = [...completed]; newArr.splice(ind, 1); setCompleted(newArr); } }; const deleteTask = (id)=> { let temp = [...arr].filter(it => it.id!==id) console.log(temp) setArr(temp) } return ( {arr.map(({ id, item }) => { return ( handleCheck(e, id)} type="checkbox" /> {item} {completed.find((task_id) => task_id === id) && ( deleteTask(id)}>Delete )} ); })} ); } //

@shaileshmadav4538 Жыл бұрын

const [check, setCheck] = useState({}) const handleCheckBox = (index, e) => { setCheck(preValue => ({...preValue, [index]: e.target.checked})) }

@rathore_shantilal Жыл бұрын

const [showDelete, setShowDelete] = useState([]); const handleCheckbox = (value, todo) => { showDelete.includes(todo) ? setShowDelete(showDelete.filter((item) => item !== todo)) : setShowDelete([...showDelete, todo]); }; handleCheckbox(e.target.checked, todo)} /> {showDelete.includes(todo) ? ( handleDeleteTodo(index)}>Delete ) : null}

@sandeepgaur98223 Жыл бұрын

can you please explain handleCheckbox code

@rathore_shantilal Жыл бұрын

@@sandeepgaur98223 I have maintained a state named "showDelete" which contain array of todo. Now how it worked : Whenever user click on checkbox , handleCheckbox will be triggered and in this function I have passed value (checked state which is further not used in function definition) and another is todo which are using in function definition . So showDelete.includes(todo) this line checked that current todo is present in state or not , if yes then we are filtering it and if not then we are adding it due to this We are using further this state to show Delete button corresponding to checkbox on the basis of corresponding todo is present in that state or not. Hope it is clear?

@sandeepgaur98223 Жыл бұрын

@@rathore_shantilal Thanks! It was indeed a very clear and to the point explanation!

@markanthonypandac2469 Жыл бұрын

heres my answer to this problem function List() { const todos = [ { label: "Magkaon", id: 1, isDone: false }, { label: "Maglung-ag", id: 2, isDone: false }, { label: "Manotbrush", id: 3, isDone: false }, { label: "Maglutog sud an", id: 4, isDone: false } ]; const [lists, setLists] = useState(todos); const handleClick = (id) => { const updatedLists = lists.filter(list => { return list.id !== id; }); setLists(updatedLists); } const handleChange = (id) => { const updatedLists = lists.map(list => { if(list.id === id){ return { ...list, isDone: !list.isDone } } return list }); console.log(updatedLists) setLists(updatedLists); } const renderedLists = lists.map(list => { return( handleChange(list.id)} checked={list.isDone} /> {list.label} {list.isDone && handleClick(list.id)}>Remove} ); }); return( {renderedLists} ); }

@markanthonypandac2469 Жыл бұрын

excuse my bisaya. lol