Hi!
I've made some progress on the project since my first post here! First, I wanna show a quick overview of what I've implemented so far:
- User can now add/remove cards
- Tasks are now stored on localStorage
- Now displaying the number of cards in each stack and the name of the stack (hey, it's a feature, ok?)
Yes, I know these are basic things (looking from a perspective of who's already have some experience with frameworks), but that's fine, I'm learning at my own pace 😄
What I struggled with
There are a couple of things and concepts that went over my head, even when I tried over and over again. I'll cover one by one to keep things organized!
Ability to create new cards
Seriously, I just couldn't figure out how to properly implement it. I was like "ok, how am I supposed to do it?". Only after reading multiple times the docs, googling, and writing down what I expected the component to do, I was able to implement it and understand why it works (that's the most important thing for me).
The difference between declaring a variable inside and outside the component (even on the same file)
To be honest, I'm not 100% sure that I understand completely this, so if you know any source explaining in-depth this, I'd be happy to read it! 😃
This one was trickier for me. I just couldn't wrap my head around the fact that I needed to use hooks in order to the component keep track of the state that I wished. It took me more than I like to admit (hours) to grasp the concept.
How to pass information up
To be honest, It wasn't that difficult to understand, I just had to get some real practice to get comfortable with how it works. (thinking of it, I already used the concept of passing functions as parameters, but I didn't make the link until now).
Typo ☠
sighs. I spent like 30 minutes checking the logic of my code trying to debug why the new tasks weren't being added properly when I created them. Then I gave up.
Just kidding 😁
I found out that the bug was related to each child in a list not having a unique key (but, they did have), but I just couldn't see where I was making a mistake, so I asked for help (thank you, Sinc02). Turns out that my problem was a typo! I had added an extra 's' on my code. It should have been task.id but I coded as tasks.id, which messed up the rest of the functionality of the code.
So, I removed that sneaky extra letter, and everything worked like a charm!
Final thoughts
I have a lot to do, but I'm happy with my progress. The next step is to implement the ability to drag the cards around to change their current state (in progress, done, etc). I've also learned more about prop drilling, component composition and, the context api.
Doing this project has been fun so far and things look promising. I had a lot of difficulties and problems along the way, but these hard things taught me a lot, so in the end, they were good things.
I'm still learning how to write these blog posts, but I think I'm getting the handle of it 😄
Well, I gotta go for now! Thanks for reading and I wish you the best, fellow stranger! Godspeed.
Top comments (2)
Keep writing!😊
I will! Thanks for commenting 😀