https://tranquil-chimera-7fb2ff.netlify.app/ #17
Conversation
There was a problem hiding this comment.
Great work @mustafadurmusNl ! 👏 I do not have a lot to mention, a few comments in the PR. But I also noticed that your deployed version does not match completely with the example. This is what I found:
- When I click on a category, the whole page refreshes instead of just the list of categories. In the live example only the categories refresh, not the filters or the title of the page. Please see if you can fix that 💪
- Clicking on the same category should remove the filtering and all categories should be shown again. Please see if you can fix this by looking at the example 🙂
| @@ -0,0 +1,49 @@ | |||
| /* eslint-disable no-unused-vars */ | |||
There was a problem hiding this comment.
❓
Why have you disabled this lint rule? 🙂
| const fetchCategories = async () => { | ||
| setLoading(true); | ||
| try { | ||
| const response = await fetch(categoryUrl); | ||
| const data = await response.json(); | ||
| setCategories(data); | ||
| } catch (error) { | ||
| setError("Failed to fetch categories."); | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| }; |
| if (loading) return <div>Loading...</div>; | ||
| if (error) return <div>{error}</div>; |
There was a problem hiding this comment.
Good to have a loading and error state! 👏
| {categories.map((category) => ( | ||
| <div key={category} | ||
| className = {`category ${category === selectedCategory ? 'category-selected' : ''}`}> | ||
| <h3 onClick={() => handleCategoryChange(category)}>{category}</h3> |
There was a problem hiding this comment.
⚒️
As mentioned in review of week 1, you can now only select a category if you click directly on the h3/title/text and not on the rest of the button. Please fix this so the category is also selected if you click on the entire button 🙂
| <div className="categories"> | ||
| {categories.map((category) => ( | ||
| <div key={category} | ||
| className = {`category ${category === selectedCategory ? 'category-selected' : ''}`}> |
There was a problem hiding this comment.
⚒️
Nice work with the conditional CSS! However, there should not be spaces between the attribute and the value.
| className = {`category ${category === selectedCategory ? 'category-selected' : ''}`}> | |
| className={`category ${category === selectedCategory ? 'category-selected' : ''}`}> |
No description provided.