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
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' : ''}>
...
first of all, you should save the data.allMdx.nodes in a state, I'm sure you already know that
then whenever you want to swap some element with another one you can do this:
const swap=()=>{
const tmp=[...listState]
// here you do the changes to the tmp list
setState(tmp)
}
return (
<Layout pageTitle='Projects'>
<GridIndex>
{state.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>
);