Select a grid element from a .map

I have a grid and I need to select the fourth element and move from the first column to second column in the row below. I know how to do it in plain html, but not how to select the grid element inside a map.

Here the code:

  return (
    <Layout pageTitle='Projects'>
      <GridIndex>
        {data.allMdx.nodes.map((node) => (
          <article key={node.id} className=''>
            <Link to={`/projects/${node.slug}`}>
              <div>{node.frontmatter.title}</div>
              <GatsbyImage
                image={getImage(node.frontmatter.imageCover)}
                alt={node.frontmatter.imageCoverAlt}
                className='h-auto xs:square'
              />
            </Link>
          </article>
        ))}
      </GridIndex>
    </Layout>
  );
};

I just need to select the fourth element and put this className: className='col-start-2'

Here an image to understand the problem: grid

Answer

You can use the index of the map to check if its the 4th iteration.

return (
  <Layout pageTitle='Projects'>
    <GridIndex>
      {data.allMdx.nodes.map((node, i) => (
        <article key={node.id} className={i === 3 ? 'col-start-2' : ''}>
        ...

Advertisement

Answer