30 React Basic Exercises for Intermediate with Solutions

Master intermediate React skills with our comprehensive list of top 30 exercises. Dive into coding challenges that improve your understanding and proficiency in React, setting a solid foundation for advanced challenges. Start your journey to React mastery today!

Learning Objectives:

These intermediate React exercises will help you deepen your understanding of state management, hooks, context API, and component lifecycle methods. By completing these challenges, you'll improve your ability to build dynamic, efficient, and scalable React applications.

Exercise Instructions:

Start with the first exercise and attempt to solve it before checking the hint or solution.
Ensure you understand the logic behind each solution, as this will help you in more complex problems.
Use these exercises to reinforce your learning and identify areas that may require further study.

1. Create a component that fetches and displays a list of hardcoded items from a mock API.

Required Input:

[{ "id": 1, "title": "Item 1" }, { "id": 2, "title": "Item 2" }]

Expected Output:

Item 1
 Item 2

Code In React

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

Open Sandbox

Need help ?

Click on Hint to solve the question.

2. Create a component that changes the document title to the number of times a button is clicked.

Required Input:

Initial click count: 0

Expected Output:

Document title updates to Clicked 1 times, Clicked 2 times, etc.

Code In React

import React, { useState, useEffect } from "react";
 
 const ClickTracker = () => {
  return (
  <div>
  <button>Click Me</button>
  </div>
  );
 };
 
 export default ClickTracker;

Open Sandbox

Need help ?

Click on Hint to solve the question.

3. Build a component that toggles between light and dark themes with a button click.

Required Input:

Initial theme: 'light'

Expected Output:

Background color switches between white and black.

Code In React

import React, { useState } from "react";
 
 const ThemeToggler = () => {
  return (
  <div>
  <button>Toggle Theme</button>
  </div>
  );
 };
 
 export default ThemeToggler;

Open Sandbox

Need help ?

Click on Hint to solve the question.

4. Create a dropdown that lets users select a country, and display the selected country below.

Required Input:

["India", "USA", "Canada"]

Expected Output:

Initially: Selected Country: India
 After selection: Selected Country: [chosen country]

Code In React

import React, { useState } from "react";
 
 const CountrySelector = () => {
  return (
  <div>
  <select>
  <option>India</option>
  <option>USA</option>
  <option>Canada</option>
  </select>
  <p>Selected Country:</p>
  </div>
  );
 };
 
 export default CountrySelector;

Open Sandbox

Need help ?

Click on Hint to solve the question.

5. Create a counter component using useReducer with increment, decrement, and reset actions.

Required Input:

Initial counter value: 0

Expected Output:

Increment, decrement, and reset the counter.

Code In React

import React, { useReducer } from "react";
 
 const Counter = () => {
  return (
  <div>
  <p>Counter: 0</p>
  <button>Increment</button>
  <button>Decrement</button>
  <button>Reset</button>
  </div>
  );
 };
 
 export default Counter;

Open Sandbox

Need help ?

Click on Hint to solve the question.

6. Create a search bar component that filters and displays items from a hardcoded list as the user types.

Required Input:

["Apple", "Banana", "Cherry", "Date", "Elderberry"]

Expected Output:

Filtered list updates based on the search term.

Code In React

import React, { useState } from "react";
 
 const SearchBar = () => {
  return (
  <div>
  <input type="text" placeholder="Search..." />
  <ul>
  {/* Render filtered items */}
  </ul>
  </div>
  );
 };
 
 export default SearchBar;

Open Sandbox

Need help ?

Click on Hint to solve the question.

7. Create a timer component that counts down from a predefined number of seconds and stops at zero.

Required Input:

Initial timer value: 10

Expected Output:

Timer counts down to 0 and stops.

Code In React

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

Open Sandbox

Need help ?

Click on Hint to solve the question.

8. Create a component that displays a random quote from a predefined list each time a button is clicked.

Required Input:

["Quote 1", "Quote 2", "Quote 3"]

Expected Output:

Randomly selected quote displays on button click.

Code In React

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

Open Sandbox

Need help ?

Click on Hint to solve the question.

9. Create a component that uses localStorage to save and persist a user's preferred theme (light or dark).

Required Input:

Initial theme: 'light'

Expected Output:

Theme persists across page refreshes.

Code In React

import React, { useState, useEffect } from "react";
 
 const PersistedTheme = () => {
  return (
  <div>
  <button>Toggle Theme</button>
  </div>
  );
 };
 
 export default PersistedTheme;

Open Sandbox

Need help ?

Click on Hint to solve the question.

10. Create a multi-step form where users can navigate between steps to input their details.

Required Input:

Steps:
 Name
 Email
 Review and Submit

Expected Output:

User navigates through each step to complete the form.

Code In React

import React, { useState } from "react";
 
 const MultiStepForm = () => {
  return (
  <div>
  <p>Step 1</p>
  </div>
  );
 };
 
 export default MultiStepForm;

Open Sandbox

Need help ?

Click on Hint to solve the question.

1 of 3