Scribd
Upload
3 views

Assignment-11

The assignment involves building a user dashboard at LaunchDarkly using React's useState hook for state management. Key tasks include setting up a React project, creating a UserDashboard component to manage user data, handling user input for name changes, and ensuring dynamic updates for user interactions. The exercise aims to enhance understanding of state management and dynamic UI updates in React applications.

Uploaded by

angaradevimahi007
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Assignment-11

The assignment involves building a user dashboard at LaunchDarkly using React's useState hook for state management. Key tasks include setting up a React project, creating a UserDashboard component to manage user data, handling user input for name changes, and ensuring dynamic updates for user interactions. The exercise aims to enhance understanding of state management and dynamic UI updates in React applications.

Uploaded by

angaradevimahi007
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Assignment: State Management with useState at LaunchDarkly

Scenario: At LaunchDarkly, you're responsible for building features that manage user data on a
dashboard. To handle user interactions and make the application dynamic, you will implement state
management using React's useState hook. Your task is to create a dashboard that allows users to
interact with and update their information, like changing their name, status, or theme preference.

The goal of this assignment is to help you get comfortable using the useState hook to manage state
in functional components, and to track changes in the UI based on user input.

Assignment Tasks:

1. Set Up Your React Project:

o If you haven't already, set up your React project using Vite:

npm create vite@latest react-user-dashboard --template react

cd react-user-dashboard

npm install

npm run dev

2. Create the User Dashboard Component:

o Create a new component called UserDashboard that will represent the main
dashboard. This component should display:

 A user's name

 A toggleable user status (active/inactive)

 A button to change the user's theme (light/dark)

In the UserDashboard component, use useState to manage the following states:

o name: A string representing the user's name (e.g., "John Doe").

o status: A boolean that toggles between "Active" and "Inactive".

o theme: A string that changes between "light" and "dark" mode.

3. Handle User Input for Name Change:

o Add an input field to allow the user to change their name.

o Use useState to manage the name state and bind the input field to it.

o When the user types in the input field, update the state with the new name.

4. Styling the Dashboard:

o Apply basic styling to make the dashboard visually appealing.

 Style the user-info and theme-toggle sections.


 Use light and dark themes by adjusting background colors and text colors
dynamically based on the theme state.

5. Display Changes Dynamically:

o As the user interacts with the dashboard, ensure the following updates:

 Changing the name via the input field should immediately update the name
displayed on the dashboard.

 Toggling the status should change the button text and update the displayed
status ("Active" or "Inactive").

 Toggling the theme should dynamically update the page's appearance


between light and dark modes.

6. Bonus (Optional):

o Add additional functionality, such as:

 Displaying a message when the status is "Inactive", for example, "Your


account is currently inactive. Please update your status."

 Save the user's theme preference in localStorage so that when they return to
the page, their theme preference is remembered.

Submission:

Submit the following files:

1. src/App.jsx: The main file where you initialize and render the UserDashboard component.

2. src/UserDashboard.jsx: The component that manages the user name, status, and theme
using useState.

3. src/styles.css: The file containing the styles for the dashboard and theme.

4. README.md: A brief explanation of your approach:

o How did you use useState to manage component state?

o Describe how the user interactions (changing name, toggling status, toggling theme)
are handled dynamically.

o Any challenges faced when implementing the state management or dynamic


updates.

Learning Outcomes:

By completing this assignment, you will:

 Understand how to use the useState hook to manage state in functional components.

 Learn how to handle dynamic UI updates based on user interaction.


 Gain experience in building interactive React components that are capable of changing their
state and re-rendering based on user input.

This exercise is foundational for managing local state in React, a key skill for building dynamic,
responsive user interfaces at LaunchDarkly and beyond.

You might also like