The first week of learning a new computer language is always the toughest for me. I guess that makes sense. The first few days of learning something new are challenging in many things in life. However, when it comes to programming, the aspect that I find the most difficult early on is not usually the big overarching ideas that I'm trying to wrap my brain around. Instead, I find my biggest problem are all of the little mistakes that I make that keep me from getting to even work on the big ideas.
For example, here was a tiny error that I made during my first days of learning React.js that cost me way too much time to debug. This was time that I could have been using to work on the concept of components, props, state and effect. Instead, I spent that time trying to determine what bug was in my code that was causing none of it to run at all? Here's the error:
TypeError: items.map is not a function
And here was where the error referred me to:
const mappedItems = items.map(player =>
What did it mean that .map is not a function? Map is a method just like filter and forEach. And I used them learning javascript and I used it exactly the right way in my code this time and now it suddenly isn't working? Why is React conspiring against me?!
And technically, I was correct. There was NOTHING wrong with the way the code the error was referring me to was written. So after too many minutes of looking over the code and searching through examples to make sure I'd used map correctly, I turned to Google and copied in the error.
"TypeError: map is not a function" occurs when we call the map() method on an object that is not an array. To solve the error, console. log the value you're calling the map() method on" Well, I'm a step ahead of you Google! I already put in a console.log right after I pulled the items from the JSON and it told me that items IS an array of objects. So I ask again - WHY IS REACT CONSPIRING AGAINST ME?!
So I don't want to bore you with all the details, but after some more console.logs I did eventually discover the error. When I pulled the items from the database, it WAS an array of objects, but then when I put it in state, I wanted the state to start off empty so I wrote the following:
const [items, setItems] = useState("")
And there was my problem! In useState I set items to an empty string. And instead I needed to write this:
const [items, setItems] = useState([])
and set it an empty array... TWO CHARACTERS that cost me WAY too much time.
But the saddest part? I made the same mistake AGAIN three days later! And those two characters had seemed like such a simple mistake in the midst of learning far more complex concepts that I hadn't bothered to write it down in my notes of what to look out for. So it took me ANOTHER ten minutes to remember the issue and resolve the problem a second time.
So what's the moral of this sad tale? Don't gloss over the tiny mistakes you make when you're learning something complex because it could very well be those itty bitty mistakes that cost you a bunch of debugging time later.
Top comments (0)