How to Iterate and Lay Out UI Elements in Sets of X

React

Let’s say you have a list of items that you need to render diagonally in sets of three:

You can use the modulo operator to determine the placement of each individual list item:

jsx

const alignByIndex = (index) => {
  const place = index + 1
  const numberOfItemsPerSet = 3

  if (place % numberOfItemsPerSet % 3 === 0) {
    return 'flex-end'
  }

  if (place % numberOfItemsPerSet % 2 === 0) {
    return 'center'
  }

  if (place % numberOfItemsPerSet % 1 === 0) {
    return 'flex-start'
  }
}

If you want to have sets of four, you only need to set numberOfItemsPerSet to 4 and write an if condition for the fourth item.

Here’s an example of how you could use it inside a React component:

jsx

const Diagonals = ({ items }) =>
  <ul>
    {
      items.map((item, index) =>
        <li key={item.id} style={{ alignSelf: alignByIndex(index) }}>
          {item.title}
        </li>
      )
    }
  </ul>