React - Using a for-loop inside JSX

Question

In the following React component:

import React, { useState, useEffect } from 'react';

const List = () => {
  const docLimit = 2;
  const maxColNumber = 6;

  const [cards, setCards] = useState([]);
  const [beginAfter, setBeginAfter] = useState(0);


  return (
    <>
      <div className='collection'>
        <div className='collection__set' onClick={() => setBeginAfter(0)}>
          First 2 data
        </div>
        <div
          className='collection__set'
          onClick={() => setBeginAfter(docLimit * 1)}
        >
          Next 2 data
        </div>
        <div
          className='collection__set'
          onClick={() => setBeginAfter(docLimit * 2)}
        >
          Next 2 data
        </div>
        <div
          className='collection__set'
          onClick={() => setBeginAfter(docLimit * 3)}
        >
          Next 2 data
        </div>
      </div>

      <ul className='list'>
        {cards.map((card) => (
          <li key={card.id} className='list__item'>
            <DeleteCard card={card} />
          </li>
        ))}
      </ul>
    </>
  );
};

export default List;

I want to use a loop to output this part:

<div className='collection'>
    <div className='collection__set' onClick={() => setBeginAfter(0)}>
      First 2 data
    </div>
    <div
      className='collection__set'
      onClick={() => setBeginAfter(docLimit * 1)}
    >
      Next 2 data
    </div>
    <div
      className='collection__set'
      onClick={() => setBeginAfter(docLimit * 2)}
    >
      Next 2 data
    </div>
    <div
      className='collection__set'
      onClick={() => setBeginAfter(docLimit * 3)}
    >
      Next 2 data
    </div>
  </div>

But it doesn't matter what I try, it doesn't work.

I tried this:

const renderMenu = () => {
    const menu = [];
    for (var i = 0; i < maxColNumber; i++) {
      menu.push(
          <div
            className='collection__set'
            onClick={setBeginAfter(docLimit * i)}
          >
            Next 2 data
          </div>
      );
    }
    return (
        <div className='collection'>menu</div>
        )
  };

But it didn't work. Can someone please help me with this?

CevaComic · Accepted Answer · 2020-06-21 01:41:25Z

3

Insted of using for, you can use map.

Try this method:

const Menu = () => Array(maxColNumber / 2).fill().map((_, i) => {
    const onClick = () => setBeginAfter(docLimit * i)
    return (
        <div className='collection'>
            <div
                className='collection__set'
                onClick={onClick}
                >
                Next 2 data
            </div>
        </div>
    )
})
// later in your code , just add the tag
<Menu />

edited Jun 21, 2020 at 1:41

answered Jun 21, 2020 at 1:02

CevaComic

2,1142 gold badges9 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

CevaComic Over a year ago

You can use useMemo if the maxColNumber doesn't change, and you can keep it inside the functional component. This way it won't re-render each time. You can read more about useMemo here

CevaComic Over a year ago

@user1941537, I edited the post. I hope this solves your problem.

user1941537 Over a year ago

Yes, it's working now. I only had to change Array(maxColNumber / 2) to Array(maxColNumber / 2 + 1). 1000 thanks. One last question though. What is i in your code. I don't see that i is declared anywhere in your code.

CevaComic Over a year ago

The i is declared in the map. map(_,i), that's the index of the iteration. More here, you don't need to declare it yourself, is provided by map.

CevaComic Over a year ago

@question: if you read the docs , the _ should be the name of the current element. Since the current element in this case is undefined, and we don't do anything with it, it's good practice using an underscore.

|

Collectives™ on Stack Overflow

React - Using a for-loop inside JSX

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related