2023 React JS Interview: Live Coding Round (Mock)

Posted by

React JS Interview 2023 Live Coding Round (Mock)

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.

0 0 votes
Article Rating
46 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@mauliingle8322
10 months ago

chai aur code

@springpro
10 months ago

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>
</>
);
};

@anubhavbhardwaj5341
10 months ago

Delete can be done with the help of splice

@bekizodcancer3657
10 months ago

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?

@VishalSharma-rn7mt
10 months ago

Awesome

@namansharma7531
10 months ago

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>

</>

);

}

@proeditz108
10 months ago

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

@nk-bq6xy
10 months ago

Sir, from were can i get this type of questions

@shloksaraogi1850
10 months ago

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>

&nbsp; {item} &nbsp;

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

);

}

@aveenism
10 months ago

is it for fresher or how many experienced level question

@shailenderjaiswal1685
10 months ago

this is very nice

@user-pj9ny2vt2l
10 months ago

input pain click nahi change event lagta hain

@user-pj9ny2vt2l
10 months ago

he did in very complicated way

@abnow1998
10 months ago

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

@dragonball7044
10 months ago

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>
);
})}
</>
);
}

@Kakashi-ek1ju
10 months ago

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

@tushard3736
10 months ago

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

@galax5130
10 months ago

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.

@jayanth9445
10 months ago

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>
);
}

@mayankmisra00
10 months ago

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