Week 4 Assignment

Overview

In this assignment, we will focus on rendering lists in React. You will learn how to load static data from a JSON file and render it dynamically using the JavaScript .map() method. The goal is to become proficient in breaking down your UI into small, reusable components and passing data via props.

Part 1: Initial Setup

Link to the Week 4 Page

Edit the project file /app/page.js (the landing page) and add a link to week-4 in the list of links.

Create the Folder and Files

Create the folder /app/week-4 and the files page.js, item-list.js, item.js, and items.json inside it.

`items.json`

This file contains the data for the shopping list. It is an array of objects, where each object represents an item in the list.

Copy the following data into /app/week-4/items.json:

[
  {
    "id": "1h2GJKH12gkHG31h1H",
    "name": "milk, 4 L 🥛",
    "quantity": 1,
    "category": "dairy"
  },
  {
    "id": "2KJH3k2j3H1k2J3K1H",
    "name": "bread 🍞",
    "quantity": 2,
    "category": "bakery"
  },
  {
    "id": "3h2KJH3k2j3H1k2J3",
    "name": "eggs, dozen 🥚",
    "quantity": 2,
    "category": "dairy"
  },
  {
    "id": "4k2J3K1H2GJKH12gk",
    "name": "bananas 🍌",
    "quantity": 6,
    "category": "produce"
  },
  {
    "id": "5H1h1H2KJH3k2j3H",
    "name": "broccoli 🥦",
    "quantity": 3,
    "category": "produce"
  },
  {
    "id": "6H1k2J3K1H2GJKH1",
    "name": "chicken breasts, 1 kg 🍗",
    "quantity": 1,
    "category": "meat"
  },
  {
    "id": "7gkHG31h1H2KJH3k",
    "name": "pasta sauce 🍝",
    "quantity": 3,
    "category": "canned goods"
  },
  {
    "id": "8j3H1k2J3K1H2GJK",
    "name": "spaghetti, 454 g 🍝",
    "quantity": 2,
    "category": "dry goods"
  },
  {
    "id": "9H12gkHG31h1H2KJ",
    "name": "toilet paper, 12 pack 🧻",
    "quantity": 1,
    "category": "household"
  },
  {
    "id": "10H3k2j3H1k2J3K1",
    "name": "paper towels, 6 pack",
    "quantity": 1,
    "category": "household"
  },
  {
    "id": "11k2J3K1H2GJKH12",
    "name": "dish soap 🍽️",
    "quantity": 1,
    "category": "household"
  },
  {
    "id": "12GJKH12gkHG31h1",
    "name": "hand soap 🧼",
    "quantity": 4,
    "category": "household"
  }
]

Part 2: The Components

Build the `Item` Component

In item.js, create a functional component named Item.

This component must accept name, quantity, and category as props. It should render these details in a list item (<li>) element, styled with Tailwind CSS to look organized (e.g., using a card-like appearance).

Tip: Ensure you are destructuring the props in the function arguments or accessing them via a props object.

Build the `ItemList` Component

In item-list.js, create a functional component named ItemList.

Imports: Import the Item component you just created and the data from items.json.
Mapping: Inside the component, use the JavaScript map function to loop through the items array.
Rendering: For each item in the array, return an Item component.
Props: Pass the name, quantity, and category from the data object to the Item component as props.
Keys: Don't forget to provide a unique key prop for each component using the item's id.

Requirements:

Do not use useState or any state management.
Do not include any buttons or event handlers.
Focus strictly on ensuring data flows correctly from the JSON file -> ItemList -> Item.

Build the `Page` Component

In page.js, create a functional component named Page.

It should return a main element wrapped around an h1 header ("Shopping List") and the ItemList component. Since ItemList is handling the data internally (loading the JSON), you do not need to pass props to ItemList at this stage.

Optional Extra Challenge

Right now, the list renders in the order provided by the JSON file.

Without using state or buttons, try to render the list grouped by category. The result should look like this:

Bakery

bread 🍞

Canned Goods

pasta sauce 🍝

Dairy

eggs, dozen 🥚
milk, 4 L 🥛

...etc

Hint: You can achieve this by manipulating the data before you map it. You might use the .reduce() method or multiple .filter() calls to organize the items into categories, and then map over those categories.

Part 3: Assignment Submission

Submit the links to your github repo and deployed site

Handling Lists Week 5: Interactivity with Forms