Thread by @benmvp

Nope JSX doesn't have a built-in loop construct. Instead it offloads looping to JavaScript & just accepts an array of JSX elements for rendering lists

💡 So in React, to loop we gotta convert an array of data ➡️ array of JSX elements

Let's look at some ways how...

/thread 🧵👇🏾

Calling `.map` on the array is the most popular way to generate that array of JSX elements

And cuz `.map` returns a new array we can inline it directly in the JSX w/o using a var (also very common)

Putting the `.map` inline makes it *feel* like traditional loop templates

🧵👇🏾

Using a regular `for` loop (or `for-of`, `.forEach`, etc) requires a var that we gotta `.push` into

`for` is likely more familiar to JS newcomers but it means we cannot inline the code

...unless we wanna go rogue and put it in an IIFE 🤯 (anyone used one here before???)

🧵👇🏾

Buuut if you really want looping in your JSX, babel-plugin-jsx-control-statements adds a JSX element to enable it

There's nothing to import in the source code. Just use the `<For>` element

github.com/AlexGilleran/j…

This was a common approach in React's early days

🧵👇🏾

Lastly, what if our data source isn't an array (or object)? Like a number or something? We can use a `for` loop directly

But since I prefer functional-style programming I first convert that number into an array, then use good ol' `.map`

🧵👇🏾

If you're new to React, hopefully this info can clarify looping for you

Or if you already know React, it'll provide examples of how to explain it to those teammates you're training 🙌🏾

You can also share this post w/ the full details

🧵👇🏾

benmvp.com/blog/looping-i…

I've got a weekly newsletter where I share this type of content. It's not the link aggregator type, but it contains a brand new post & an old one I share

It's all about the frontend: JS/TS, React, DivOps, CSS & more! Subscribe to get your learn on 😉

benmvp.com/subscribe/?utm…