Top 30 React Practice Exercises for Intermediate with Solutions

11. Create a component that fetches paginated data from a hardcoded API and displays it with 'Next' and 'Previous' buttons.

Required Input:

{ "page1": ["Item 1", "Item 2", "Item 3"], "page2": ["Item 4", "Item 5", "Item 6"] }

Expected Output:

Displays items from the current page and updates on 'Next' or 'Previous' button clicks.

Code In React

import React, { useState } from "react";
 
 const PaginatedData = () => {
  return (
  <div>
  <ul>
  {/* Render paginated items */}
  </ul>
  <button>Previous</button>
  <button>Next</button>
  </div>
  );
 };
 
 export default PaginatedData;

Open Sandbox

Need help ?

Click on Hint to solve the question.

12. Create a component that renders a list of items with expandable/collapsible details.

Required Input:

[{ "title": "Item 1", "details": "Details about Item 1" }, { "title": "Item 2", "details": "Details about Item 2" }]

Expected Output:

Clicking an item toggles the visibility of its details.

Code In React

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

Open Sandbox

Need help ?

Click on Hint to solve the question.

13. Create a component that tracks the user's mouse position on the screen.

Required Input:

No input.

Expected Output:

Displays real-time mouse coordinates.

Code In React

import React, { useState, useEffect } from "react";
 
 const MouseTracker = () => {
  return (
  <div>
  <p>Mouse Position: (0, 0)</p>
  </div>
  );
 };
 
 export default MouseTracker;

Open Sandbox

Need help ?

Click on Hint to solve the question.

14. Create a component that displays a chart using a library like Recharts.

Required Input:

[{ "name": "Jan", "value": 400 }, { "name": "Feb", "value": 300 }, { "name": "Mar", "value": 200 }]

Expected Output:

A bar chart showing the data.

Code In React

import React from "react";
 import { BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts";
 
 const DataChart = () => {
  return (
  <div>
  {/* Render chart here */}
  </div>
  );
 };
 
 export default DataChart;

Open Sandbox

Need help ?

Click on Hint to solve the question.

15. Create a component that allows users to upload an image file and preview it before submission.

Required Input:

An image file selected by the user.

Expected Output:

The selected image is displayed as a preview below the upload button.

Code In React

import React, { useState } from "react";
 
 const ImageUploader = () => {
  return (
  <div>
  <input type="file" />
  {/* Display image preview here */}
  </div>
  );
 };
 
 export default ImageUploader;

Open Sandbox

Need help ?

Click on Hint to solve the question.

16. Create a to-do list component that allows users to add, edit, and delete tasks.

Required Input:

Initial tasks: ["Task 1", "Task 2"]

Expected Output:

Users can add new tasks, edit existing tasks, and delete tasks from the list.

Code In React

import React, { useState } from "react";
 
 const TodoList = () => {
  return (
  <div>
  {/* Render tasks and actions */}
  </div>
  );
 };
 
 export default TodoList;

Open Sandbox

Need help ?

Click on Hint to solve the question.

17. Create a multi-select dropdown that lets users select multiple items from a predefined list.

Required Input:

List of items: ["Option 1", "Option 2", "Option 3"]

Expected Output:

Displays selected items below the dropdown.

Code In React

import React, { useState } from "react";
 
 const MultiSelectDropdown = () => {
  return (
  <div>
  <select multiple>
  {/* Render options */}
  </select>
  {/* Display selected items */}
  </div>
  );
 };
 
 export default MultiSelectDropdown;

Open Sandbox

Need help ?

Click on Hint to solve the question.

18. Create a component that dynamically sorts a list of items in ascending or descending order based on a button click.

Required Input:

List of numbers: [4, 2, 9, 1]

Expected Output:

Sorted list updates based on ascending or descending order.

Code In React

import React, { useState } from "react";
 
 const SortableList = () => {
  return (
  <div>
  <button>Sort Ascending</button>
  <button>Sort Descending</button>
  <ul>
  {/* Render sorted list */}
  </ul>
  </div>
  );
 };
 
 export default SortableList;

Open Sandbox

Need help ?

Click on Hint to solve the question.

19. Create a component that fetches and displays a random joke from a mock API.

Required Input:

{ "joke": "Why did the chicken cross the road? To get to the other side!" }

Expected Output:

A random joke is displayed when the button is clicked.

Code In React

import React, { useState } from "react";
 
 const RandomJoke = () => {
  return (
  <div>
  <p>Joke:</p>
  <button>Get Random Joke</button>
  </div>
  );
 };
 
 export default RandomJoke;

Open Sandbox

Need help ?

Click on Hint to solve the question.

20. Create a component that highlights the list items clicked by the user.

Required Input:

List of items: ["Item 1", "Item 2", "Item 3"]

Expected Output:

The clicked item changes its background color to yellow.

Code In React

import React, { useState } from "react";
 
 const HighlightedList = () => {
  return (
  <div>
  <ul>
  {/* Render list items with click handler */}
  </ul>
  </div>
  );
 };
 
 export default HighlightedList;

Open Sandbox

Need help ?

Click on Hint to solve the question.

2 of 3