React problem statements

1. Fetch and Display Users: Create a React component that fetches a list of users from
https://jsonplaceholder.typicode.com/users using Axios inside useEffect and displays
them in a list.
2. Fetch Posts and Show Titles: Fetch posts from
https://jsonplaceholder.typicode.com/posts, store them in useState, and display only
their titles.
3. Show Comments for a Post: Fetch comments from
https://jsonplaceholder.typicode.com/comments and display them inside a card.
4. Button Click to Fetch Data: Display a button. When clicked, fetch user data from
https://jsonplaceholder.typicode.com/users and display it.
5. Fetch Random Joke on Button Click: Use https://official-joke-
api.appspot.com/random_joke to fetch and display a random joke whenever a
button is clicked.
6. Fetch and Show a Country’s Details: Use
https://restcountries.com/v3.1/name/{country} to fetch details of a country entered
by the user and display its flag, capital, and population.
7. Fetch and Display To-Do List: Fetch to-do items from
https://jsonplaceholder.typicode.com/todos and display them in a list.
8. Counter with Increment, Decrement, and Reset: Create a counter using useState
with buttons to increase, decrease, and reset its value.
9. Theme Toggle (Light/Dark Mode): Implement a theme switcher using useState and
apply different styles for light and dark modes.
10. Toggle Password Visibility: Create a password input field with a "Show/Hide" button.
11. Accordion (Expand/Collapse Sections): Implement an accordion UI where clicking a
section expands/collapses its content using useState.
12. Basic To-Do List App: Create a basic to-do list app where users can add, mark as
completed, and delete to-do items using useState.
13. Countdown Timer: Create a countdown timer using useState and useEffect. The
timer should allow users to start, pause, and reset it. It should decrease every second
when running and stop at zero.
14. Dynamic Button Click Message: Create a functional component using useState to
manage a single state variable. The component should display a default message and
have three uniquely labeled buttons (e.g., "Button 1", "Button 2", "Button 3"). When
 a button is clicked, update the displayed text dynamically based on which button was
pressed.
15. Update Title on Mount: Create a React functional component that uses useEffect to
update the title displayed inside the component when it mounts. The title should
change automatically when the component is first rendered.
16. Reusable Button Component: Create a React component that renders five buttons
using a reusable Button component. Each button should accept a label prop and
display unique text inside the <button> element.
17. Product Component with Props: Create a Product component that accepts multiple
props (name, price, description) and displays the product details inside a card layout.
The component should dynamically render different products based on the passed
props.
18. Form Submission with Console Log: Create a React component with two input fields
where users can enter text. When the user presses the "Submit" button, the entered
data should be displayed in the console.
19. Login Form with Password Validation: Create a React login form using useState. The
password must be at least 8 characters long. If the user enters a shorter password,
show an error message and prevent submission until the requirement is met.
20. Search and Filter Users: Fetch a list of users from
https://jsonplaceholder.typicode.com/users and implement a search box that allows
users to dynamically filter names as they type.
21. Sort Users Alphabetically: Fetch users from
https://jsonplaceholder.typicode.com/users using Axios inside useEffect. Display the
users in a list and add two buttons to sort them alphabetically by name in ascending
or descending order.
22. Multi-Step Form: Create a multi-step form using useState with three steps: Personal
Details, Address Details, and Review & Submit. Use a single state variable to track the
current step and navigate using Next/Previous buttons. No validation required.
23. Live Text Display from Input: Create a React component that has an input field
where users can type text. As they type, the text should instantly be displayed below
the input field using useState.
24. Time-Based Greeting Message: Create a React component that gets the current hour
and displays a greeting message:
• Before 12 PM → "Good Morning"
• Between 12 PM - 6 PM → "Good Afternoon"
• After 6 PM → "Good Evening"
25. Manage an Array of Numbers: Create a React component that stores an array of
numbers using useState. Implement buttons to:
• Add a number (push)
• Remove the last number (pop)
• Find a specific number (find)
26. Like/Unlike Button: Create a React component using useState that toggles between
"Like" and "Unlike" when clicked.
27. Role-Based UI Update: Create a React component using useState that displays
different messages based on a user role selection (Admin, User, Guest). When the
user selects a role from a dropdown, update the UI to show the corresponding
message dynamically.