React JS interview 2023 Live Coding Round (Mock)

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)

🧑‍🏫 Full Course Playlists

💻 Projects Playlists

🕹 Mini Projects (Single Video)

[prakashbanjade]

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

[pankajpundir]

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

[bishwajeetpandey]

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] =

const deleteClickHandler = (index) => {
alert(index);
const filteredArr = [];
for (let i = 0; i < fruitsArr.length; i++) {
if (i !== index)
}
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 (
<div className="App">
{console.log("render")}
<h1>Hello Codeandbox</h1>
<h2>Start editing to see some magic happen!</h2>
{fruitsArr.map((element, index) => {
return (
<div key={index}>
<input
type="checkbox"
onChange={(e) => handleCheck(e.target.checked, index)}
></input>{" "}
&nbsp;&nbsp;
{element}
{chkBoxStates[index] && (
<button onClick={() =>
)}
</div>
);
})}
</div>
);
}

[lipinkariappa]

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)=>{

})
})

[anshulbhorde]

export default function App() {
const [data, setData] = useState(["A", "B", "C"]);
return data.map((label, i) => (
<Root
onDelete={() => setData(data.filter((name) => label !== name))}
key={label}
label={label}
/>
));
}

function Root({ label, onDelete }) {
const [checked, setChecked] = useState(false);

return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "centet"
}}
>
<input
checked={checked}
onChange={(e) =>
type="checkbox"
/>
<p>{label}</p>
{checked && <button
</div>
);
}

[pranshukumar]

For checkboxes we can create an state which will be an array of all the selected boxex item index... This array will be manipulated upon clicking on the checkbox.. Checkbox unchecks and checks itself.. No need to keep a checkbox status in this case.. Now upon clicking a checkbox pass the index of item.. Now check whether the checkbox array state contains that index or not (by using arr.includes (index)).. If yes.. Then splice that index.. If no then push the index in that array.. This way we will always have an array of items index for which checkbox is selected.. Based on that we can do conditional rendering of delete button..

[rizkydjanuar]

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

[pratiksavaliya]

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

[galax]

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.

[shayanalijalbani]

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

[bardenishi]

what the helpful video you are making!

[subhajit]

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

[proeditz]

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

[hichamKM]

The index solution is not ideal. If you perform random checking and deletion, you will encounter some bugs. Instead of using the index, you can work with the item name itself

[chillpill]

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

[Yadavladka]

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

[mechanical_engineer_]

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

[anirbandas]

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

[WeakCoder]

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

[anubhav.codess]

Delete can be done with the help of splice