Week 6 Assignment

Setup Files

Let's first create a new folder for this assignment and populating it with the files from previous assignments to use as a starting point.

• Create a new folder called week-6 inside your app folder.
• Copy item-list.js, item.js, items.json, and page.js from /week-5 to /week-6.
• Copy new-item.js from /week-4 to /week-6.

Modify page.js

Next, we're going to update page.js to serve as the orchestrator of our shopping list app. This involves integrating the imported components, setting up state management for the items, and establishing the event handler for adding new items to the list.

• Import the NewItem and ItemList components.
• Import items.json as itemsData.
• Initialize a state variable (e.g., items) with the data from items.json.
• Create an event handler function (e.g., handleAddItem) that adds a new item to items.
• In your render function, display both the NewItem and ItemList components.
  • Pass the handleAddItem event handler to the NewItem component as a prop called onAddItem.
  • Pass the items state to the ItemList component as a prop.
• Add the "use client" directive at the top of the file.

Modify new-item.js

Next, our attention shifts to new-item.js. We'll be enhancing this component by introducing a new prop and redefining its behavior upon form submission. Rather than triggering an alert, it will now invoke the onAddItem prop, passing along the item object.

• Add a new prop { onAddItem }.
• Replace the alert functionality by calling the onAddItem prop with the item object when the form is submitted. The item object should have the following properties: name, quantity, and category.

Modify item-list.js

Let's now turn our focus to the item-list.js file. We're going to modify it to receive data via props and revise all functions that were previously altering the list directly. Instead, they should operate on a copy of the prop to ensure we're adhering to the principle of immutability in React.

• Remove the import statement for items.json since the data is now being passed as a prop.
• Add a new prop { items }.
• Replace all functions that mutate the items prop with versions that do not mutate the prop. Instead, these functions should create a copy of items, perform any necessary operations on the copy, and use this copy for rendering.

item.js does not need to be modified.

Test Your Application

Cross your fingers and run npm run dev to see if your application works as expected.

• Ensure that adding a new item with the NewItem form adds the item to the ItemList.
• Make sure the ItemList maintains its sorting functionality from Week 5.

Fix All Warnings

Now, it's time for some housekeeping. We need to ensure our application is free of warnings which might indicate potential issues.

• Fix all warnings that appear in the browser console and in the terminal. To view warnings in the browser, open the developer tools and click on the "Console" tab. To view warnings in the terminal, look for any warnings that appear in the terminal window where you ran the command npm run dev.