Generating UI from Data (Rendering Lists)

Requirement

Understand how to take raw data (like an array of user names) and automatically turn it into an array of UI components. Instead of copy-pasting code 10 times for 10 users, you write the component layout once and tell React to loop over the data and generate the UI for you.

Assignments (Start First)

1. Simple beginner UI task: Create an array of your favorite movies (just strings). Build a MovieList component that uses JavaScript's .map() method to render an unstyled <ul> containing an <li> for each movie.
2. Slightly improved version: Change your data to be an array of objects (e.g., { id: 1, title: "Inception" }). Render the list again, but this time ensure you pass the unique id as a special key prop to the <li> element to clear the React console warning.
3. Practical real-world component: Build a NavigationSidebar. Take an array of route objects (e.g., { label: "Home", icon: "🏠", isActive: true }) and map them into a stylized sidebar menu. If an item isActive, give it a distinct highlighted background color.
4. "The Escalation": Create a TaskManager. Start with an array of task objects in state. Map over the state array to render a list of beautifully styled TaskCard components. Add a "Delete" button inside each card that, when clicked, filters that specific task out of the state array, causing the list to update instantly.

Lessons (Optional)

• The .map() Method: The standard JavaScript array method. In React, we use it to transform an array of data into an array of JSX elements.
• Keys: Every time you render a list in React, the outermost element in the loop MUST have a unique key prop (usually a database ID).
• Data Separation: Keeping your raw data structured in arrays/objects keeps your JSX clean and readable.

The Summary and Quizzes

1. Concept explanation: Rendering lists allows us to build scalable, flexible UIs that grow automatically as our data grows, without duplicating code.
2. Why it works in React: React loops through your array and stamps out a component for every item. It uses the key prop to track each specific item, so if one item gets deleted or changed, React only updates that one piece instead of destroying and redrawing the whole list.
3. Challenge question: Why is it considered a bad practice to use the array index as a key prop if the user is allowed to delete or reorder items in that list?