How to display images in row and column in React

Question

I'm well versed with Angular but not React. I want to display images in a row-col layout in such a way that no. of columns should be dynamic while the no. of rows should be adjusted accordingly. That means if the user gives 4(say) images and says that he wants 2(say) columns, then the grid layout should be 2X2. Pretty simple.

I'm setting the state in App.js

state = {
    flowerCard: [
      {
        colCount: 3,  // <-------------- this will decide number of columns
        tiles: [
          {
            imageSource: '...',
            text: 'White flower',
          },
          {
            imageSource: '...',
            text: 'Red flower',
          },
          {
            imageSource: '...',
            text: 'Purple flower',
          },
          {
            imageSource: '...',
            text: 'Purple flower',
          },
        ],
      },
    ],
  };

  ...
  
  <Card
    colCount={this.state.flowerCard[0].colCount}
    tiles={this.state.flowerCard[0].tiles}>
  </Card>

Card.js

  let localTiles = props.tiles;
  let colCount = props.colCount;
  return (
    <div>
      {localTiles.map((tile, index) => {
        return (
          <div>
            <Row>
              <Col md={4}>
                <p>{tile.text}</p>
                <Image
                  className="tile-image"
                  height={100}
                  width={300}
                  src={tile.imageSource}
                  alt="logo"
                />
              </Col>
            </Row>
          </div>
        );
      })}
    </div>
  );

I've done similar thing in Angular using *ngFor. Please help me achieve this in React. I've created one stackblitz for your ease. please pitch in.

"That means if the user gives 4(say) images and says that he wants 2(say) columns, then the grid layout should be 2X2. Pretty simple." Is the user in control of the number of images and column count? Can you better, or more clearly, state what you want the code behavior and expected result to be? — Drew Reese
– Drew Reese, Commented Sep 22, 2021 at 19:35

HollyOS · Accepted Answer · 2021-09-21 19:29:14Z

1

If you're trying to populate cards in the list, that should be done with .map on an array. It works similarly to ngFor from Angular. So, you've got that piece correct. Where things will get different is by setting the width of your columns. You're going to need to be more reliant upon CSS to get the grid set. Styled components are a nice option since they allow you access to prop values. However, you can also work inline if need be.

Look into CSS Grid or CSS Flexbox for your layout needs.
Set the appropriate width based on the number of columns you'll need:

const StyledCol = styled(Col)`
  width: calc(100% / ${colCount}); /* Dynamically sets the grid column widths based on it's parent container element width */
`;

If you need to maintain px value, in the props, you'll need to figure out the width of the container then just divide that by the number of columns.

const pxWidth = containerPxWidth / colCount;

...

  width={pxWidth}

I would suggest moving the width and height settings to your <Col> instead though. Then you can size the image to 100% (or whatever percentage) of the parent dimensions. This allows for some more flexibility in how you move the children within the given grid space.

Card.js

  // Destructuring for the win
  const { tiles: localTiles, colCount } = props;

  // If you need to have this inline, also need to figure out `containerPxWidth`
  // value based on the width of the `Row`
  const pxWidth = containerPxWidth / colCount;

  return (
    <div>
      {/* You can auto return map with parenthesis */}
      {localTiles.map((tile, index) => (
        <div>
          <Row height={100}>
            <Col md={4} width={pxWidth}>
              <p>{tile.text}</p>
              <Image
                className="tile-image"
                src={tile.imageSource}
                alt="logo"
              />
            </Col>
          </Row>
        </div>
      ))}
    </div>
  );

edited Sep 21, 2021 at 19:29

answered Sep 21, 2021 at 19:19

HollyOS

4072 silver badges13 bronze badges

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

2 Comments

Tanzeel Over a year ago

let me try this. i'll get back to you

Tanzeel Over a year ago

unfortunately, it didn't work as expected

Collectives™ on Stack Overflow

How to display images in row and column in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related