React Practice Questions

ReactPracticeQuestions.md

React Practice Question

• Toggle Button: Create a toggle button component that switches between "On" and "Off" states when clicked.

• Timer: Create a timer component that displays a running timer in the format "MM:SS" and starts at 00:00.

• Image Carousel: Create an image carousel component that displays a series of images and allows users to navigate through them using previous and next buttons.

• Dark Mode Toggle: Create a dark mode toggle component that switches between light and dark themes for your application when clicked.

• Form Validation: Create a form component with multiple input fields that require validation. Use React hooks to manage the state of the form and display validation errors.

• Drag and Drop List: Create a list component that allows users to reorder items by dragging and dropping them. Use React hooks to manage the state of the list and implement the drag and drop functionality.

• Todo List with Local Storage: Create a todo list component that allows users to add, remove, and mark tasks as completed. Use React hooks to manage the state of the list and store the tasks in the browser's local storage.

• Infinite Scroll: Create a component that fetches data from an API endpoint and displays it in a scrollable container. Implement infinite scrolling using React hooks to load more data as the user scrolls.

• Autocomplete Search: Create an autocomplete search component that suggests search options as the user types. Use React hooks to manage the state of the search input and display the suggestions.

• Pagination with API: Create a component that fetches a large list of items from an API and displays them in a paginated manner. Use React hooks to manage the current page and limit the number of items displayed per page.

• Write a React component that implements a "Session" feature for a Pomodoro Timer. The component should have two modes: "Work" mode and "Break" mode. In "Work" mode, the timer should run for 25 minutes, and in "Break" mode, the timer should run for 5 minutes. The component should switch between the two modes every 25 minutes, and display a message indicating the current mode.

• Write a React component that implements a timer. The component should display the current time and update it every second. The component should use the useState hook to store the current time and the useEffect hook to update the time every second. The component should also have a "Start" and "Stop" button to control the timer. When the "Start" button is clicked, the timer should start running, and when the "Stop" button is clicked, the timer should stop.

• Write a React component that implements a "Counter" feature. The component should have a button that increments a counter when clicked. The component should use the useState hook to store the counter value and the useEffect hook to update the counter every time it changes.