Top 30 React Practice Exercises for Intermediate with Solutions

21. Create a component that implements a progress bar that updates based on a button click.

Required Input:

Initial progress value: 0%

Expected Output:

Progress bar fills up in increments of 10% on button click until it reaches 100%.

Code In React

import React, { useState } from "react";
 
 const ProgressBar = () => {
  return (
  <div>
  <div style={{ width: "100%", backgroundColor: "#ccc", height: "20px" }}>
  {/* Render progress */}
  </div>
  <button>Increase Progress</button>
  </div>
  );
 };
 
 export default ProgressBar;

Open Sandbox

Need help ?

Click on Hint to solve the question.

22. Create a component that fetches and displays user data from a mock API with a 'Load More' button to fetch additional users.

Required Input:

[{ "id": 1, "name": "User 1" }, { "id": 2, "name": "User 2" }]

Expected Output:

Initially displays two users, with more users added on button click.

Code In React

import React, { useState } from "react";
 
 const LoadMoreUsers = () => {
  return (
  <div>
  <ul>
  {/* Render user data */}
  </ul>
  <button>Load More</button>
  </div>
  );
 };
 
 export default LoadMoreUsers;

Open Sandbox

Need help ?

Click on Hint to solve the question.

23. Create a component that renders a notification banner, which disappears after 5 seconds.

Required Input:

Notification message: "This is a notification"

Expected Output:

The notification appears and automatically disappears after 5 seconds.

Code In React

import React, { useState, useEffect } from "react";
 
 const NotificationBanner = () => {
  return (
  <div>
  {/* Render notification */}
  </div>
  );
 };
 
 export default NotificationBanner;

Open Sandbox

Need help ?

Click on Hint to solve the question.

24. Create a component that implements infinite scrolling to load more items as the user scrolls to the bottom of the page.

Required Input:

Initial items: ["Item 1", "Item 2", "Item 3"], Additional items: ["Item 4", "Item 5"]

Expected Output:

New items are added when the user scrolls to the bottom.

Code In React

import React, { useState, useEffect } from "react";
 
 const InfiniteScroll = () => {
  return (
  <div>
  {/* Render items */}
  </div>
  );
 };
 
 export default InfiniteScroll;

Open Sandbox

Need help ?

Click on Hint to solve the question.

25. Create a component that displays a dropdown of categories, and dynamically updates a second dropdown with corresponding items when a category is selected.

Required Input:

{ "Fruits": ["Apple", "Banana", "Cherry"], "Vegetables": ["Carrot", "Broccoli", "Spinach"] }

Expected Output:

Selecting 'Fruits' shows 'Apple, Banana, Cherry' in the second dropdown, and selecting 'Vegetables' updates the items accordingly.

Code In React

import React, { useState } from "react";
 
 const DynamicDropdown = () => {
  return (
  <div>
  <select>
  {/* Render categories */}
  </select>
  <select>
  {/* Render items */}
  </select>
  </div>
  );
 };
 
 export default DynamicDropdown;

Open Sandbox

Need help ?

Click on Hint to solve the question.

26. Create a component that implements a stop timer, allowing users to start, stop, and reset the timer.

Required Input:

Initial time: 0

Expected Output:

A timer that counts up when started, pauses when stopped, and resets to 0.

Code In React

import React, { useState, useEffect } from "react";
 
 const Timer = () => {
  return (
  <div>
  <p>Time: 0</p>
  <button>Start</button>
  <button>Stop</button>
  <button>Reset</button>
  </div>
  );
 };
 
 export default Timer;

Open Sandbox

Need help ?

Click on Hint to solve the question.

27. Create a component that uses useMemo to optimize the rendering of a list of items by sorting them only when necessary.

Required Input:

Initial list: [4, 2, 9, 1]

Expected Output:

A sorted list is displayed only when the user clicks the 'Sort' button.

Code In React

import React, { useState, useMemo } from "react";
 
 const OptimizedSort = () => {
  return (
  <div>
  <button>Sort</button>
  <ul>
  {/* Render sorted items */}
  </ul>
  </div>
  );
 };
 
 export default OptimizedSort;

Open Sandbox

Need help ?

Click on Hint to solve the question.

28. Create a component that allows users to add and remove tags dynamically.

Required Input:

Initial tags: ["React", "JavaScript"]

Expected Output:

Users can add a new tag or remove an existing one by clicking a delete button next to it.

Code In React

import React, { useState } from "react";
 
 const TagManager = () => {
  return (
  <div>
  <ul>
  {/* Render tags */}
  </ul>
  <input type="text" />
  <button>Add Tag</button>
  </div>
  );
 };
 
 export default TagManager;

Open Sandbox

Need help ?

Click on Hint to solve the question.

29. Create a component that tracks and displays how many times each button in a group of buttons has been clicked.

Required Input:

Buttons: ["Button 1", "Button 2", "Button 3"]

Expected Output:

Each button displays its own click count.

Code In React

import React, { useState } from "react";
 
 const ButtonClickTracker = () => {
  return (
  <div>
  {/* Render buttons with click counts */}
  </div>
  );
 };
 
 export default ButtonClickTracker;

Open Sandbox

Need help ?

Click on Hint to solve the question.

30. Create a component that dynamically generates a grid layout based on a predefined number of rows and columns.

Required Input:

Rows: 3, Columns: 3

Expected Output:

A 3x3 grid of divs.

Code In React

import React from "react";
 
 const DynamicGrid = () => {
  return <div>{/* Render grid here */}</div>;
 };
 
 export default DynamicGrid;

Open Sandbox

Need help ?

Click on Hint to solve the question.

3 of 3