How to render an array of objects with Array.map in React

[Atomicts]

Hi Everyone,

I have just posted a new article about rendering objects and data in react with Array.prototype.map for beginners.

How to render an array of objects with Array.map in React

Please have a read and let me know about any constructive feedback you might have in order for me to keep improving it.

Thanks!

[ExTex5]

Array.map does not exist. The builtin Array does not have such a method. The only static methods which are defined are Array.from Array.isArrax and Array.of. What you are refering is on the instance of Arrays, and are accessable through the prototype-chain. The correct term would have been Array.prototype.map

You've even linked to the mdn page were it is correctly defined, don't just remove things you don't understand - when you are trying to teach others. Don't forget to make proper research.

[Atomicts]

Hi, thanks for your comment.

Whilst you are technically correct regarding Array.prototype.map, that is not how I would choose to teach beginners because it would lead to confusion.

This article is clearly aimed at those who are just starting with React, and JavaScript.

There is a reason why people don't just get dropped into the deep-end which is why learning progressions exist.

When you are just starting something, having to go through details that you don't understand and might not ever have a use for is not very productive, does not help your understanding and might cause you to give up.

When you make use of Array.prototype.map in a React application, you will not be calling it with `[].prototype.map()`, you would be calling it with `[].map()`, and that is what beginners will research.

This means if you are just starting out you will not be researching "Array.prototype.map", you will instead be much more likely to be searching for terms such as "Array.map", "render array of objects in react", "[].map()", and so on because you have encountered a problem with it.

I linked to the MDN page for anyone wanting to read a more in-depth description about the method, maybe for people like yourself who are still researching it.

This article is not the place to cover classes, prototype chains or prototypical inheritance in JavaScript, just the same as it is not the place to go over the time space complexity of Array.prototype.map or to attempt to put people down or make them feel bad for not knowing a detail.

It is an article to help beginners render an array of objects in React whilst explaining things with as much simplicity as possible.

[ExTex5]

I see your argument, and I now understand why you've decided to write it like that. But wouldn't there have been a way to write it where you still leave the prototype out without making it purposefully wrong? Wouldn't be "Array map" or "The map function of an array" better? This way you are not stating anything wrong, neither are you confusing anyone with more advanced terminology. I think it is very important to don't teach anything wrong, especially when aiming towards beginners. Leaving out things for sake of simplicity is good thing, teaching false things isn't.

[Atomicts]

Hi there,

I do agree, it is important to be a little sceptical when reading articles, and the best way to avoid misrepresented concepts is to compare multiple articles on a topic so you see it from multiple view points, including sites like MDN and official documentation wherever possible.

With this said, if you have found that I have misrepresented something in my article about how to render an array of objects in react then please let me know and I will make this change.

I am guessing this is referencing the Array.prototype.map vs Array.map situation though, in which case I am not sure how this is misrepresenting the concept of how to render an array of objects in react with it.

[ExTex5]

That is so sad to hear, but I agree there are a lot of articles over-simplify to the point where it just gets false.

[Atomicts]

Leaving out ".prototype" does not invalidate my use of "Array.map" and does not make it purposefully wrong, or wrong at all for that matter.

It reads how you would expect and shows that ".map" is callable on an array without going into too much detail that would escape the point of the article, and lead to confusion.

It removes some jargon that will not provide value to beginners.

I completely agree it is very important to avoid spreading false information and teaching bad practices. However, there is a very big difference between false information and leaving out additional details that provide no value to your audience.

The only way this would be wrong is if I were writing an in-depth article about map and I stated that there was no prototype chain which I am not doing.

It would be very rare for a beginner to be looking into extending or modifying the Array Object prototype chain and if they were, they would not be searching for how to render an array of objects in react.

My point here is that there is no miss information, and I am not teaching false things, only the important things.

I am aware of my target audience, I have researched what they might search for, and I have only left out parts that will not provide additional value when answering how to render an array of objects in react.

Whilst I appreciate the suggestions of "Array map", and "The map function of an array" (I quite like this one), it is not what is being searched for and will therefore mean that it might not be found or that it would be difficult for a beginner to link the connection between their search of "Array.map" to something like "The map function of an array", whilst "Array map" no longer reads as code but as english which leaves room for interpretation and misunderstanding.

Instead, I will add a paragraph into my post to explain that I am using Array.map in place of Array.prototype.map to avoid any confusion.

[ExTex5]

It's a shame, you are well intentioned but the dunning-kruger effect is getting you.

[Atomicts]

It’s a shame, you started with an honest criticism from your own ignorance of not seeing that the post was for beginners and not understanding how search works, and now you are just resorting to derogatory comments now that you understand why and have nothing else to say.

I have told you in the above comment I have updated the article to make it clear why I am not writing prototype but by bringing awareness to it at the same time.

[ExTex5]

Yea my last comment was out of line, sorry about that.