This project is designed to help you (and others) learn React.js deeply through hands-on coding. It’s a collection of simple yet practical problems that strengthen your understanding of React concepts — perfect for interview preparation or improving your logic-building skills.
Before you dive in, make sure you're comfortable with the fundamentals of React, including how the Virtual DOM works and the core React Hooks.
You can try solving each problem yourself or explore how they work through the live website linked below.
🔗 Live Demo: React Practice Problems
The problems are organized by difficulty level — feel free to explore and learn at your own pace!
| Problem Name | Problem Description |
|---|---|
| Accordion | Build a React Accordion component that allows users to expand and collapse sections of content. |
| Chips Input | Build a component that takes input of tags or keywords. The component will display these tags and can add and remove it. |
| Contact Form | Create a Contact Form Component that allows users to enter their name, email, and a message, and submit the form. |
| Counter React | Create a React counter with increment, decrement, and reset functionalities using useReducer hook. |
| Guess the Number | Create a game where the user tries to guess a randomly generated number between 1 and 100 and shows total attempts made. |
| Image Switcher | Build an image switcher component that updates the main image by clicking on the image thumbnail accordingly. |
| Mortgage Calculator | Create a Mortgage Calculator in React using useReducer that allows users to input details to calculate the monthly mortgage payment. |
| Progress Bar | Create a Progress Bars Component in React that visually represents progress values for bar. |
| Read More | Create a React component that displays a paragraph of text and allows users to expand or collapse it based on read more click. |
| Scroll to Top | Create a Back to Top button that appears when the user scrolls down the page and, when clicked, smoothly scrolls back to the top. |
| Search Filter | Create a React component that shows the filtered fruits based on the text inserted into the Input box in Real-time. |
| Seconds Stopwatch | Build a simple stopwatch with Start, Stop, and Reset functionality. The stopwatch should display elapsed time in seconds. |
| Sidebar | Create a React sidebar component that can be toggled open or closed with a menu button and is animated. |
| Skeleton Loading | Create a card component with skeleton loading effect for heading and content which will load after 3 seconds delay. |
| Toggle Password | Create a react component that allows users to input a password. User can toggle the password to show or hide. |
| Problem Name | Problem Description |
|---|---|
| Card Carousel | Build a card carousel component that displays one card at a time with navigation buttons to navigate back and forth. |
| Dice Roller | Create a Dice Roller that simulates rolling a dice when a button is clicked. Handle a case where the button is clicked multiple times quickly. |
| Image Carousel | Build an image carousel which works with navigation buttons as well as the pagination provided below |
| Image Gallery | Create a component that should allow users to view, add, and delete images. Each image is represented by a URL. |
| Modal in React | Create a reusable Modal Component in React that displays a message when triggered by a button click. |
| Reusable Toast | Implement a Toast notification feature that provides brief feedback to the user in the form of a popup. |
| Sortable List | Create a sortable list component that allows users to add items and reorder them as ascending or descending as needed. |
| Star Rating | Implement a star rating component where users can select a rating by clicking on stars. |
| Tabs Component | Implement a Tabs Component that allows users to switch between different tab content sections. |
| Todo List | Build a Todo List component which enables users to Add task, mark the task as complete, delete task |
| Transfer List | Build a simple Transfer List component in React that allows users to move items from one list to another list. |
Created with 💖 by Mitesh Adelkar