-
Notifications
You must be signed in to change notification settings - Fork 0
Home
This article aims to provide an insightful exploration of coding challenges, and essential best practices for acing ReactJS interviews. By delving into the core concepts and practical scenarios, readers will gain a comprehensive understanding of what to expect in ReactJS coding interviews.
Write code to fetch the user's details from the open source rest endpoint and display the user's details in the table with proper style and in the center.
const Task1 = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) =>
response.json().then((data) => {
console.log("data", data);
setUsers(data);
})
)
.catch((e) => console.error("Unable to fetch data", { e }));
}, []);
return (
<div>
<h2>User Details</h2>
<table className="table">
<thead>
<tr>
<th>name</th>
<th>email</th>
<th>website</th>
<th>phone</th>
<th>Company Name</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.website}</td>
<td>{user.phone}</td>
<td>{user.company?.name}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Task1;Fetch the user details and display user names. Also, implement a search bar functionality on the username.
const Task2 = () => {
const [users, setUsers] = useState([]);
const [searchTerm, setSearchTerm] = useState("");
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) =>
response.json().then((data) => {
console.log("data", data);
setUsers(data);
})
)
.catch((e) => console.error("Unable to fetch data", { e }));
}, []);
const filteredUsers = users.filter(user =>
user.name.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<div>
<h2>User Details</h2>
<div className="search-container">
<input
type="text"
placeholder="Search by Name"
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
<div className="table-container">
<table className="table">
<thead>
<tr>
<th>name</th>
<th>email</th>
<th>website</th>
<th>phone</th>
</tr>
</thead>
<tbody>
{filteredUsers.map((user) => (
<tr key={user.id}>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.website}</td>
<td>{user.phone}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};
export default Task2;Improve the search functionality using debounce and cancelable request and display filtered user details only.
const Task3 = () => {
const [users, setUsers] = useState([]);
const [searchTerm, setSearchTerm] = useState("");
const [filteredUser, setFilteredUser] = useState({});
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) =>
response.json().then((data) => {
console.log("data", data);
setUsers(data);
})
)
.catch((e) => console.error("Unable to fetch data", { e }));
}, []);
useEffect(() => {
const abortController = new AbortController();
const timer = setTimeout(() => {
try {
fetch(
`https://jsonplaceholder.typicode.com/users?username=${searchTerm}`,
{
signal: abortController.signal, // Pass the AbortController's signal to the fetch request
}
)
.then((response) => response.json())
.then((data) => {
console.log("FilteredUser ", data);
setFilteredUser(data[0]);
});
} catch (error) {
if (error.name === "AbortError") {
console.log("Request was aborted");
} else {
console.error("Error fetching user data:", error);
}
}
}, 300)
return () => {
abortController.abort();
clearTimeout(timer);
}
}, [searchTerm])
return (
<div>
<h2>User Details</h2>
<div className="search-container">
<input
type="text"
placeholder="Search by Name"
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
<div className="table-container">
<table className="table">
<thead>
<tr>
<th>Name</th>
<th>email</th>
<th>username</th>
<th>phone</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.id}>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.username}</td>
<td>{user.phone}</td>
</tr>
))}
</tbody>
</table>
</div>
<div>
<h4>Search Result</h4>
{filteredUser && filteredUser.name}
</div>
</div>
);
};
export default Task3;Write code to fetch the user’s details and display the usernames. There should be two buttons to sort usernames in ascending order and descending order.
const Task4 = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) =>
response.json().then((data) => {
console.log("data", data);
setUsers(data);
})
)
.catch((e) => console.error("Unable to fetch data", { e }));
}, []);
const handleAscendingSort = () => {
const usersData = [...users].sort((a, b) =>
a.username.localeCompare(b.username)
);
setUsers(() => usersData);
};
const handleDescendingSort = () => {
const usersData = [...users].sort((a, b) =>
b.username.localeCompare(a.username)
);
setUsers(() => usersData);
};
return (
<div>
<h2>User Details</h2>
<h5>Example of short by username</h5>
<div style={{ marginBottom: "1rem" }}>
<button
onClick={() => handleAscendingSort()}
style={{ marginRight: "10px" }}
>
Short by Ascending
</button>
<button onClick={() => handleDescendingSort()}>
Short by Descending
</button>
</div>
<div className="table-container">
<table className="table">
<thead>
<tr>
<th>Name</th>
<th>email</th>
<th>username</th>
<th>phone</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.id}>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.username}</td>
<td>{user.phone}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};
export default Task4;Create a user registration form with fields for username, email, and password. Validate inputs and display appropriate error messages. (Create a controlled form component with a state to manage input values.)
Implement the logic to change the app display mode using context API.
Create a simple to-do list application where you can add, and remove tasks from the list.
Prepare JSON data for shopping items and implement a shopping cart app where users can add items, update the number of items, remove items, and display the final amount for the total order.
Build a pagination component that fetches and displays data from an API, showing a fixed number of items per page
Build an image gallery that loads more images as the user scrolls down the page. Implement lazy loading for improved performance.
Written By Adwaitya Sadhukhan