Yes this unit makes me always want to sleep.
3 Likes
Successfully completed the lesson, followed all the steps to the T and passed all the checks so I can move on to the next lesson. Only problem is that nothing renders other than “Loading…” in the first render:
<sarcasm>
Absolutely outstanding. Congratulations on another lesson well done. Money well spent.
</sarcasm>
Something went wrong here because you still have the if statement that re-declares selectCategory and items if categories is truthy. Seems sus 
1 Like
Sounds like many of the issues above may have been resolved, but I found a couple of items that took me some time to figure out.
- You have to remove the if statement to initialize the state values of selectCategory and items, make sure to un-indent those initialization lines.
- The instructions didn’t make it clear to me that I’m supposed to initialize items to an empty object. From some of the discussions on this thread, it seems like this was the default before. However, when I reset the exercise, items initializes to undefined which really takes a while to figure out what’s wrong. Below is a picture of the starting code.
const [items, setItems] = useState(); should be const[items, setItems] = useState({});
This causes errors because of the following code:
<ul>
{!items[selectedCategory]
? null
: items[selectedCategory].map((item) => <li key={item}>{item}</li>)}
</ul>
!Items[selectedCategory] doesn’t work too well on “undefined”
2 Likes
Yeah I fixed it and got it all working, but my point was that I shouldn’t have to troubleshoot the exercise after following all the steps. I love me some problem solving so I don’t have an issue debugging.
Just isn’t very helpful for people learning to have ambiguous or erroneous instructions.
Hi!
Sorry I didn’t understand everything in the second useEffect() (question 3).
-
In the dependency array I wrote only [selectedCategory].
But when I looked at the solution, this should be [items, selectedCategory].
Why “items”? We cannot know that items have changed, unless we retrieve it, and we do it each time selectedCategory changes. -
Just after the setItems() function, I tried to alert items to see what is there in my items array, just to understand better. But instead of displaying the content of items, it displayed the type [object object].
So then I replaced the alert(items) by console.log(items), and I opened the console in the developer tools, but nothing was logged to my console… Why cannot I see the content of items? -
I am not sure to understand perfectly how the second useState() hook works.
setItems((items) => ( { …items, [selectedCategory]: response.data } ));
Why “selectedCategory” is inside of square braces?
That’s why I would like to see items’ content.
Here we only would like to add a new key of selectedCategory to our items object, and the content of this key is an array of data isn’t it?
If I remove the square brackets, then the second useEffects() is launched again and again (which is normal because if items have changed then there is a new render so useEffects() is re-executed). But why do the square brackets hinder this to happen?
So to prevent useEffect to re-execute each time the setItems() execute, I remove “items” from my dependency array. But then the items list is not even displayed on the webpage…
So I’m very confused finally. Could you give me some clarification please?
Thanks
-
Print contents of an object in JavaScript | Techie Delight
You can also click the folder icon, and then from themockBackendfolder, have a look atdata.jsto see the items arrays for each category. -
In an earlier lesson “Objects in State ”, it was mentioned that we can convert a string into a key by the use of square brackets (see Computed Property Names in JavaScript – eloquent code).
let myStr = "c";
let myObj = {a: 1, b: 2};
myObj[myStr] = 3;
console.log(myObj);
Output: { a: 1, b: 2, c: 3 }
// Now let us try to do the same in an object literal
let myStr = "c";
let myObj = {a: 1, b: 2, myStr: 3}
console.log(myObj);
Output: { a: 1, b: 2, myStr: 3 }
// Let us use square brackets in the object literal
let myStr = "c";
let myObj = {a: 1, b: 2, [myStr]: 3}
console.log(myObj);
Output: { a: 1, b: 2, c: 3 }
We don’t want to create a key called selectedCategory in our object. We want the keys to be Shirts, Pants, Shoes, Accessories. Hence the need for square brackets in our object literal.
{ ...prev, [selectedCategory]: response.data }
2 Likes
Thanks for the nice insights regarding the computed property names!
This exercice allowed me to understand better many points.
I understood finally that I didn’t manage to print the value of items just because the setItems() function finished its execution after the data were printed (as the code here is asynchronous) 
Now I have managed.
The concepts are difficult to apply all together and I need more practice on React even outside of the course.
Thanks again
I don’t get it why on step 4 from Rules of Hooks it is necessary to add the dependency array both [selectedCategory, items], for me it seems is only necessary selectedCategory
It’s not you. The jump in difficulty is noticeable and we go from handholding to complete lack of thorough explanation, in a matter of a few chapters. It would do well with getting rewritten from scratch to facilitate learning. I constantly have to look at hints and solutions, and don’t feel like I’m learning much.
2 Likes
Likewise. The exercises have gone from 0-60 in the blink of a chapter and I’m not ashamed to say this exercise is beyond me at the moment. I’ve ordered a React book and am pinning my hopes on learning from that as it proved a good way to learn starting out with everything else and maybe all the pieces will fall into place at a steadier pace.