React JS Interview 2023 Live Coding Round (Mock)
Are you preparing for a React JS interview in 2023? Live coding rounds are becoming increasingly popular in technical interviews, and it’s important to be well-prepared for them. In this article, we’ll walk through a mock live coding round for a React JS interview, and provide tips and tricks to help you succeed.
Scenario
You are interviewing for a React JS developer position at a leading tech company. The live coding round will involve building a small React application based on a given prompt. You will be expected to write clean, efficient code and demonstrate your understanding of React JS principles and best practices.
Mock Interview
In the mock interview, you will be presented with a prompt to build a simple to-do list application using React JS. You will have 60 minutes to complete the task, and the interviewer will observe your coding skills, problem-solving abilities, and knowledge of React JS.
Tips for Success
Here are some tips to help you succeed in the live coding round:
- Review React JS fundamentals: Make sure you have a solid understanding of React components, state, props, and lifecycle methods.
- Practice building small applications: Spend time practicing building small React applications, and familiarize yourself with common patterns and best practices.
- Refactor your code: Focus on writing clean, maintainable code and be prepared to explain your decisions during the interview.
- Communicate effectively: Talk through your thought process as you code, and don’t be afraid to ask questions or seek clarification on the prompt.
- Test your application: Write tests for your React components to demonstrate your understanding of testing in React JS.
Conclusion
The live coding round of a React JS interview can be challenging, but with the right preparation and practice, you can ace it. By reviewing React JS fundamentals, practicing building small applications, and focusing on clean coding and effective communication, you can impress the interviewers and land your dream job as a React JS developer.
chai aur code
Check and delete multiple
import React, { useState } from "react";
import { data } from "../data";
export const DeleteList = () => {
const [modifiedData, setModifiedData] = useState(data);
const [checkboxState, setCheckboxState] = useState(false);
const [checkIndex, setCheckIndex] = useState([]);
const handleDelete = (dataIndex) => {
setModifiedData(modifiedData.filter((item) => item.id !== dataIndex));
};
const checkboxChange = (e, dataIndex) => {
setCheckboxState(e.target.checked);
if (e.target.checked) {
setCheckIndex([…checkIndex, dataIndex]);
} else {
setCheckIndex(checkIndex.filter((index) => index !== dataIndex));
}
};
console.log(checkIndex);
return (
<>
<div>
<ul>
{modifiedData.map((e) => (
<li key={e.id}>
<input
type="checkbox"
onChange={(event) => checkboxChange(event, e.id)}
name=""
id=""
/>
{e.description}
{checkIndex.includes(e.id) && (
<button onClick={() => handleDelete(e.id)}>Delete</button>
)}
</li>
))}
</ul>
</div>
</>
);
};
Delete can be done with the help of splice
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?
Awesome
import "./App.css";
import React, { useState } from "react";
const arr = ["play cricket", "Hockey", "football"];
export default function App() {
const [games, setGames] = useState(arr);
const [checkedIndexes, setCheckedIndexes] = useState(new Set());
const handleDelete = (index) => {
const newFilteredArray = games.filter((item, i) => i !== index);
setGames(newFilteredArray);
};
const handleChange = (i) => {
const newSet = new Set(checkedIndexes);
if (newSet.has(i)) {
newSet.delete(i);
} else {
newSet.add(i);
}
setCheckedIndexes(newSet);
};
return (
<>
<ul>
{games.map((item, index) => (
<li key={index}>
<div>
<input
type="checkbox"
onChange={() => handleChange(index)}
/>
<span>{item}</span>
<button
style={{
display: checkedIndexes.has(index) ? "block" : "none",
}}
onClick={() => handleDelete(index)}
>
Delete
</button>
</div>
</li>
))}
</ul>
</>
);
}
He can create an another component for every list item and pass the props for every single list item.
Thanks…. 😂😂❤❤
Sir, from were can i get this type of questions
By making different component for each item in list ->
import "./styles.css";
import React,{useState} from "react";
function ListItem({arr,setArr,item}){
const [showx,setShowx] = useState(false);
function temp(item){
const abcd = arr.filter((x) => (x !== item))
setArr(abcd);
}
return (
<>
<div style={{display: "inline"}}>
<input type="checkbox" onChange={() => setShowx(!showx)} />
</div>
{item}
{showx &&
<div style={{display:"inline"}} onClick={() => temp(item)}>
[x]
</div>
}
</>
)
}
export default function App() {
const [arr,setArr] = useState(["play cricket", "play video game", "read books"])
return (
<div className="App">
{
arr.map((itemName) => {
return(
<>
<div>
<ListItem setArr={setArr} arr={arr} item={itemName}/>
</div>
</>
)
})
}
</div>
);
}
is it for fresher or how many experienced level question
this is very nice
input pain click nahi change event lagta hain
he did in very complicated way
I would have used useReducer Hook to handle checkbox value for that particular input and trigger delete if selected. Simple!!
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const arr = ["Item 1", "Item 2", "Item 3"];
const [checkBoxStatus, setCheckBoxStatus] = useState(arr.map(() => false));
const handleChange = (index, e) => {
const val = e.target.checked;
const updatedCheckBoxStatus = […checkBoxStatus]; // Create a copy of the array
updatedCheckBoxStatus[index] = val; // Update the specific index
setCheckBoxStatus(updatedCheckBoxStatus);
};
return (
<>
{arr.map((item, index) => {
return (
<div key={index}>
<input type="checkbox" onChange={(e) => handleChange(index, e)} />
<label>{item}</label>
{checkBoxStatus[index] && <button>Submit</button>}
</div>
);
})}
</>
);
}
How much salary a guy can expect from this level of interview
This problem is basic , One of the solution for this is
import "./styles.css";
import { useState } from "react";
export default function App() {
const items = ["play cricket", "play video game", "read book"];
const itemsWithCheckbox = items.map((item, idx) => [item, false]);
const [updatedItems, setUpdatedItems] = useState(itemsWithCheckbox);
function handleDelete(deletedIdx) {
setUpdatedItems((prev) => prev.filter((item, idx) => idx !== deletedIdx));
}
function handleCheck(index) {
const updatedStatusArray = updatedItems.map(([item, status], idx) => {
if (idx === index) return [item, !status];
else return [item, status];
});
setUpdatedItems(updatedStatusArray);
}
return (
<ol>
{updatedItems.map(([item, status], idx) => {
return (
<li key={item}>
<input type="checkbox" onChange={() => handleCheck(idx)} />
{item}
{status && (
<button
onClick={() => handleDelete(idx)}
style={{ padding: "5px", backgroundColor: "red" }}
>
{" "}
Delete{" "}
</button>
)}
</li>
);
})}
</ol>
);
}
https://codesandbox.io/s/gallant-khayyam-7g8dm9?file=/src/App.js
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.
function ListItem(props) {
const [btn, setBtn] = useState(false);
const [t, setT] = useState(true);
function handlePress(event) {
// console.log(event.target.value);
setBtn(!btn);
}
function handleClick(event){
setT(false);
}
return (
<div style={{display:t?"":"none"}}>
<input
onClick={handlePress}
type="checkbox"
name={props.name}
value={props.name}
/>
<label htmlFor={props.name}>{props.name}</label>
<button onClick={handleClick} style={{ visibility: btn ? "visible" : "hidden" }}>delete</button>
<br />
</div>
);
}
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()