Question 3 -- Toggle Show/Hide Message

This project is a React application that implements a show/hide toggle message feature.

GitHub Repository Submission (Code Implementation)

The code for this project is located in the src folder. - Run npm install to install dependencies. - Run npm run dev to start the development server.

---

Hard Copy Submission (Written Explanation)

1. Understanding of React Concepts

• useState Hook: React's useState hook is used to add state variables to functional components. In this project, it manages a boolean state (isVisible snippet) to keep track of whether the message should be shown or hidden.
• Event Handling: We bind a click event listener (onClick) to the button. When triggered, it calls a function that updates the state.
• Conditional Rendering: React allows us to conditionally render components or elements based on the state. The message is only injected into the DOM when isVisible evaluates to true (i.e. {isVisible && <div...>}).

2. Explanation of Folder Structure

Our project follows a standard and modular React folder structure:

text src/ ├── components/ │ ├── ToggleMessage.jsx # Reusable component containing the toggle logic and UI │ └── ToggleMessage.css # Scoped CSS styles specific to the component ├── App.jsx # The main container component that imports ToggleMessage ├── App.css # Global and layout styling for the entire application └── main.jsx # The entry point of the React app that mounts App to the DOM

• Placing ToggleMessage.jsx in the components folder keeps the main App.jsx clean and ensures the toggle feature can be reused anywhere in the application.

3. Logic Explanation

1. We initialize the ToggleMessage component and define state: const [isVisible, setIsVisible] = useState(false);
2. isVisible starts as false, so the message is hidden by default.
3. The <button> displays dynamic text using a ternary operator: {isVisible ? 'Hide Message' : 'Show Message'}.
4. When the button is clicked, the toggleVisibility function fires and calls setIsVisible(!isVisible), reversing the boolean value.
5. If the new value is true, React re-renders the component and evaluates {isVisible && <div className="message-box">...</div>}, successfully inserting the message into the UI.
6. If the button is clicked again, the state returns to false and the message disappears.

4. Suggested Improvements, Problem Analysis & Added Features

As part of continuous improvement, the following enhancements have been successfully implemented: - Dynamic Button Text: The text of the button updates intuitively to "Hide Message" when the text is visible, and "Show Message" when hidden. - Component Separation: The toggle logic resides inside a dedicated ToggleMessage component instead of cluttering App.jsx, promoting better separation of concerns. - Animation Effects: CSS animations and transitions were added. The message block smoothly slides up and fades in (@keyframes fadeIn) when toggled true. The button also contains hover background transitions and click scaling.

Analysis of Potential Problems:

One common problem when dynamically rendering and destroying DOM child elements (like hiding the paragraph entirely) is that CSS exit animations (fade-out) aren't naturally supported by conditionally unmounting the element since React immediately removes it from the DOM. An improvement for larger scalabilty or future builds would be using a library like framer-motion to handle exit animations effortlessly.