Like the if/else statements, when we would like to do loops in the JavaScript or TypeScript logic, we do not need to bother about any special rules.

It’s just a JS loop, as always, and we can use all types of loops (of course, not all of them are good for all cases, but it’s possible).

Anyway, we have a special reason why we should focus on the iteration methods when we develop apps for React.js.

We use iteration methods to render elements. For example, we can use iteration to render the whole list of products from the product array.

To do that, we can use few methods, one of the most popular is the map method, but we will cover the map in the separate section, and now we should focus on the other methods like loops or forEach method.

It is very popular to use loops like for-loop (in most cases the fastest one), for-in, or for-of to iterate through elements.

That method is useful when we use separate functions to render part of components, and it’s the best method for performance.

The second method that I’ve included in the example is the method with array.forEach().

This method, compared to the for-loops and map method, is the slowest one and doesn’t return the values like a map, so you need to have a special case to use it.

Let’s take a look at the code example with two for-loop and forEach methods:

// First one with For of loop
function renderComponent() {
  const products = ['orange', 'apple', 'watermelon'];
  const list = []
  for (const [i, product] of products.entries()) {
    list.push(<li>{product}</li>)
  return (
      {list}
function Parent(props) {
  return renderProducts();
// Second with forEach method
function renderComponent() {
  const products = ['orange', 'apple', 'watermelon'];
  const list = []
  products.forEach((product) => {
    list.push(<li>{product}</li>)
  return (
      {list}
function Parent(props) {
  return renderProducts();
    
Nice article! I see you mention map, but it's worth emphasizing that it is much more common to use map for this kind of thing as it doesn't require declaring your list early, mutating the list, or using side-effects.
Also, don't forget to pass the key prop!

function renderComponent() {
  const products = ['orange', 'apple', 'watermelon'];
  const list = products.map(product => <li key={product}>{product}</li>)
  return (
      {list}
    </div>
    
Hey Ben, yes, map is a good method to do that, and I've created separated episode about map, that you can watch tomorrow, here: youtube.com/watch?v=Fbc4BvYc4ec
In this one, I wanted to show other popular methods :)
              What Is Idea Validation - How to Figure Out if Your Mobile App Idea Is Profitable
                  #startup
                  #tutorial
                  #productivity
                  #webdev
              Blockchain Development Guide for Business Owners
                  #blockchain
                  #programming
                  #tutorial
                  #codenewbie
    Once unpublished, all posts by duomly will become hidden and only accessible to themselves.
    If duomly is not suspended, they can still re-publish their posts from their dashboard.
  
Note:      Unpublish all posts
    Once unpublished, this post will become invisible to the public and only accessible to Duomly.
  <p>They can still re-publish the post if they are not suspended.</p>
      Unpublish Post
      Make all posts by duomly less visible
        duomly consistently posts content that violates DEV Community's
        code of conduct because it is harassing, offensive or spammy.
      <p>Built on <a class="c-link c-link--branded" target="_blank" rel="noopener" href="https://www.forem.com">Forem</a> — the <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/opensource">open source</a> software that powers <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to">DEV</a> and other inclusive communities.</p>
      <p>Made with love and <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/rails">Ruby on Rails</a>. DEV Community <span title="copyright">©</span> 2016 - 2023.</p>