How to create dynamic Row using loop in JSX?

Question

I'm using react-bootstrap and I would like to replicate this structure:

<div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
    <div class="col-lg-6"></div>
</div>
<div class="row">
    <div class="col-lg-6"></div>
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
</div>

I've a list of articles that must be displayed within the columns above, if you look close, you can see that each row start with a different column, the first with 3 and second with 6 and so on...

So I wrote:

<Container>
    {articles.map((art, i) =>
    (i + 1) % 3 === 0 ? (
        <Row>
        {" "}
        <></>
        <BlogItem index={i} colNum={3} art={art} />{" "}
        </Row>
    ) : (
        <></>
    )
    )}
</Container>

but this create a different structure:

what I did wrong?

BlogItem

const BlogItem = ({ index, colNum, art }) => {
  const intl = useIntl()

  return (
    <div
      className={(index + 1) % colNum === 0 ? "col-lg-6" : "col-lg-3"}
      key={index}
    >
      <Link to={`/blog/${art.slug}`}>
        <Card className="card-background">
          <div
            className="full-background"
            style={{
              backgroundImage: `url(${process.env.API_URL}${art.featured_image.url})`,
            }}
          ></div>
          <Card.Body>
            <div className="content-bottom">
              <div className="card-category">
                {Localization(art.category.name, intl.locale)}
              </div>
              <Card.Title>{Localization(art.name, intl.locale)}</Card.Title>
            </div>
          </Card.Body>
        </Card>
      </Link>
    </div>
  )
}

It's impossible to know without more of your code. What's in BlogItem? And what does articles look like? — David Frederick
– David Frederick, Commented Dec 21, 2020 at 16:24
@DavidFrederick check update. BlogItem just display the article structure.. — sfarzoso
– sfarzoso, Commented Dec 21, 2020 at 16:25

David Frederick · Accepted Answer · 2020-12-21 17:06:16Z

1

You need to do another loop for your BlogItems. For each row, you want 3 BlogItems. The outer map takes care of the rows, the inner map takes care of the BlogItems.

To get your alternating classNames for the column widths, you can pass a new prop that tells the BlogItem if the row it's in is in an even place or not.

<Container>
    {articles.map((art, i) =>
    (i + 1) % 3 === 0 ? (
        <Row>
        {" "}
        <></>
        {Array(3).fill().map((el, index) => {
           return <BlogItem index={index} even={i % 2 === 0} colNum={3} art={art} />
        })}
        {" "}
        </Row>
    ) : (
        <></>
    )
    )}
</Container>

const BlogItem = ({ index, colNum, art, even }) => {
  const intl = useIntl();
  let wrapperClass;
  if (even && index === 0 || !even && index === 2) {
    wrapperClass = "col-lg-6";
  } else {
    wrapperClass = "col-lg-3";
  }

  return (
    <div
      className={wrapperClass}
      key={index}
    >
      <Link to={`/blog/${art.slug}`}>
        <Card className="card-background">
          <div
            className="full-background"
            style={{
              backgroundImage: `url(${process.env.API_URL}${art.featured_image.url})`,
            }}
          ></div>
          <Card.Body>
            <div className="content-bottom">
              <div className="card-category">
                {Localization(art.category.name, intl.locale)}
              </div>
              <Card.Title>{Localization(art.name, intl.locale)}</Card.Title>
            </div>
          </Card.Body>
        </Card>
      </Link>
    </div>
  )
}

edited Dec 21, 2020 at 17:06

answered Dec 21, 2020 at 16:35

David Frederick

2022 silver badges7 bronze badges

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

4 Comments

sfarzoso Over a year ago

Thanks for this, but how can I display different starting column for each created row? Eg: col-lg-3 second, col-lg-6

David Frederick Over a year ago

Not sure I entirely understand. Do you mean change the column width of the first item in each row? E.g. className="col-lg-{dynamicValue}" ?

sfarzoso Over a year ago

I mean {dynamicValue}. Check my example in the question, with your code is always col-lg-3, but should alternate between col-lg-3 and col-lg-6 for each new row

David Frederick Over a year ago

I updated my answer to what I think you're wanting.

Collectives™ on Stack Overflow

How to create dynamic Row using loop in JSX?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related