React Assignment – 7

Basic Questions

  1. Create a ThemeContext and provide “light” as its value. Consume it in a child component and display it.
  2. Create a UserContext with “John” as default username. Display it inside a deeply nested child using useContext.
  3. Pass a counter value from App → ComponentA → ComponentB → ComponentC.
  4. Replace the above prop drilling with Context API.
  5. Build a LanguageContext with “English” as default. Display “Hello” if English, “Namaste” if Hindi.
  6. Create a Counter component with a button that increases count using onClick.
  7. Add an input box that updates text live using onChange.
  8. Build a Login form with onSubmit that prevents page reload and logs values in console.
  9. Create a button that logs both the event object and a custom message on click.
  10. Build a Parent and Child component where clicking the child stops the event from bubbling to the parent.
  11. Display “Mounted!” in console when a component first appears using useEffect.
  12. Display “Updated!” in console whenever a counter changes.
  13. Display “Component destroyed” in console when you unmount it.
  14. Create two buttons: one increases number, one decreases it, both via onClick.
  15. Build a simple toggle component that shows/hides a paragraph with a button click.
  16. Create a button that logs “Hello React” each time it’s clicked.
  17. Create a text input that converts text to UPPERCASE while typing.
  18. Build a checkbox group with onChange that logs checked items.
  19. Display a list of names and highlight the one clicked using onClick.
  20. Create a counter that resets to zero on button click.

Intermediate Questions

  1. Create a ThemeContext and UserContext. Consume both in the same Navbar component.
  2. Build an auth reducer with login and logout. Connect it to AuthContext. Display “Welcome, user” when logged in.
  3. Create a CartContext that holds a cart array. Add/remove items from multiple components.
  4. Create a TodoContext with useReducer. Add and delete todos globally.
  5. Build a login form that updates UserContext. Show logged-in user in Navbar.
  6. Implement a light/dark theme toggle that updates all child components at once using Context.
  7. Create a CounterContext with Reducer: actions → “increment”, “decrement”, “reset”.
  8. Build a list that filters items in real-time from input typed in a search box.
  9. Create a modal that mounts/unmounts based on isVisible state and logs lifecycle in console.
  10. Create nested Parent → Child → GrandChild with click handlers. In Child, stop event propagation.
  11. Create two forms (Login and Signup) and handle their submissions separately inside one component.
  12. Build a navbar showing cart item count from CartContext. Add item buttons in multiple child components.
  13. Fetch data from a fake API inside useEffect. Display “Loading…” until data arrives.
  14. Update Context value dynamically (switch language between English/Hindi).
  15. Create a component that re-renders only when a specific prop changes (using useEffect dependencies).
  16. Build a counter with two buttons: increment by 1, increment by 5 (handle arguments in onClick).
  17. Implement parent-level event delegation for a list of dynamically created buttons.
  18. Create a reusable CustomButton that accepts onClick prop to perform different actions.
  19. Develop a subscription form that prevents reload on submit and clears input after submission.
  20. Create a component that logs “State updated” with old & new values on every state change.

Advanced Questions

  1. Create a scalable structure with AuthContext, ThemeContext, CartContext, and use them in different components (Navbar, Cart, Profile).
  2. Implement a global reducer using Context to manage Authentication + Theme + Notifications in one state object.
  3. Create a dynamic form builder where input fields are stored in Context and rendered on the UI.
  4. Build a list where each item logs “Mounted” when added and “Unmounted” when deleted.
  5. Write a custom hook useAuth that uses Context + Reducer internally and exposes login, logout, and current user.
  6. Create a Todo App with Context+Reducer that supports add, update, delete, clear completed.
  7. Implement logging middleware inside a Reducer that records each action type and state change in console.
  8. Create an animated modal: when mounted → logs “Opening animation”, when unmounted → logs “Closing animation”.
  9. Implement a deep child component that triggers an event to update state in a parent component.
  10. Build a Lifecycle Visualizer app: dynamically add/remove components and log lifecycle (mount, update, unmount) with timestamps.