Tell us what’s happening:
I am having an issue with step 23. “You should destructure useMemo from React at the top of the file. Make sure you aren’t removing the useState hook you’re already using.”
Below is my code: import React, { useState, useMemo } from ‘react’;
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: index.jsx */
{/* User Editable Region */}
import React, { useState, useMemo } from 'react';
{/* User Editable Region */}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.0.0.0 Safari/537.36
Challenge Information:
Build a Shopping List App - Step 23
import React, { useState, useMemo } from ‘react’;
const items = [
“Apples”,
“Bananas”,
“Strawberries”,
“Blueberries”,
“Mangoes”,
“Pineapple”,
“Lettuce”,
“Broccoli”,
“Paper Towels”,
“Dish Soap”,
];
export const ShoppingList = () => {
const [query, setQuery] = useState(“”);
const [selectedItems, setSelectedItems] = useState([]);
console.log(“Filtering items…”);
const filteredItems = items.filter((item) =>
item.toLowerCase().includes(query.toLowerCase())
);
const toggleItem = (item) => {
setSelectedItems((prev) =>
prev.includes(item) ? prev.filter((i) => i !== item) : \[...prev, item\]
);
};
return (
<div className="container">
<h1>Shopping List</h1>
<form>
<label htmlFor="search">Search for an item:</label>
<input
id="search"
type="search"
placeholder="Search..."
aria-describedby="search-description"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<p id="search-description">Type to filter the list below:</p>
<ul>
{filteredItems.map((item) => {
const isChecked = selectedItems.includes(item);
return (
<li
key={item}
style={{ textDecoration: isChecked ? "line-through" : "none" }}
>
<label>
<input
type="checkbox"
onChange={() => toggleItem(item)}
checked={isChecked}
/>
{item}
</label>
</li>
);
})}
</ul>
</form>
</div>
);
};