Week 7 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-7 inside your app folder.
• Copy new-item.js, item-list.js, item.js, items.json, and page.js from /week-6 to /week-7.

Create meal-ideas.js

The MealIdeas component is responsible for fetching and displaying meal ideas based on a selected shopping list item. Here are a few things to keep in mind when creating this component.

1. Import Necessary Hooks and Begin Component Definition

• Since this component uses useState and useEffect, start with the "use client" directive.
• Import the useEffect and useState hooks from react.
• This component should receive a single prop: ingredient.

2. Define State Variables

• Inside your component, define a state variable using the useState hook: meals. meals will hold the list of meal ideas fetched from the API. Initialize it to an empty array.

3. Define API Fetching Function

• Next, outside your component, define a function called fetchMealIdeas, which fetch data from the API. fetchMealIdeas should take an ingredient as a parameter, make a fetch request to the TheMealDB API (opens in a new tab), and return the meals that include that ingredient.
• The API endpoint for fetching meal ideas is: https://www.themealdb.com/api/json/v1/1/filter.php?i=${ingredient}. For example, if the ingredient is "chicken", the API endpoint would be: https://www.themealdb.com/api/json/v1/1/filter.php?i=chicken (opens in a new tab). The API returns a list of meals that include the specified ingredient. Each meal has three properties:
  • idMeal: id of the meal
  • strMeal: name of the meal
  • strMealThumb: URL of an image of the meal

4. Define Load Function

• Next, inside your component, define a function called loadMealIdeas. This function should call fetchMealIdeas with the ingredient prop and store the result in the meals state variable.

5. Use the useEffect Hook

• Use the useEffect hook to call loadMealIdeas whenever the ingredient prop changes.

6. Render the Component

• Finally, define your component's render method. This should return a div that includes a header and a list of meals. Each meal should be a list item that displays the meal's name.

Modify item.js

The changes in the item.js file from Week 6 to Week 7 are relatively straightforward with just one main change. The goal is to make each item in the list clickable so that when a user clicks on an item, it can trigger an action in the parent component.

1. Update Component Definition: Update your Item functional component's definition to accept an additional prop called onSelect.

2. Add onClick Handler to List Item: In the returned JSX, add the onClick prop. This makes the entire list item clickable and the provided onSelect function will be triggered when a user clicks on the item.

Modify item-list.js

1. Import Necessary Hooks: Start by importing the necessary React hooks at the top of your file. You'll be using the useState hook.

2. Update Component Definition: Begin defining your ItemList functional component. In addition to the items prop from Week 6, this component should now also receive an onItemSelect prop.

3. Update Render Method: The rendering of sorting buttons remains the same. The change is in rendering the list items. Now, each Item component should be clickable and trigger the onItemSelect function with the respective item as an argument. This is achieved by passing the onSelect prop to each Item component.

Modify page.js

In the page.js file, the modifications you'll need to make are as follows:

1. Import New Components: You'll need to import the new MealIdeas component at the top of the file. This component is responsible for fetching and displaying meal ideas based on a selected ingredient.

2. Additional State Variable: You'll add a new state variable selectedItemName using the useState hook. This state will hold the name of the selected item from the shopping list.

3. New Event Handler: You'll create a new event handler function handleItemSelect. This function extracts the name of the selected item, cleans it up, and updates the selectedItemName state. This event handler is passed down to the ItemList component and is called when an item in the list is clicked.

4. Layout Changes: The layout of the page has been modified to accommodate the new features. The NewItem and ItemList components are grouped together on one side, and the MealIdeas component is placed on the other side. This is achieved by wrapping them in a div with a flex property.

5. Passing Props: The ItemList component now receives the onItemSelect prop, which it didn't previously. The MealIdeas component receives selectedItemName as a prop named ingredient.