Tengo una cuadrícula y necesito seleccionar el cuarto elemento y pasar de la primera columna a la segunda columna en la fila de abajo. Sé cómo hacerlo en html simple, pero no cómo seleccionar el elemento de cuadrícula dentro de un mapa.
Aquí el código:
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> ); }; Solo necesito seleccionar el cuarto elemento y poner este className: className='col-start-2'
Aquí una imagen para entender el problema: grilla
Puede usar el index del mapa para verificar si es la cuarta iteración.
return ( <Layout pageTitle='Projects'> <GridIndex> {data.allMdx.nodes.map((node, i) => ( <article key={node.id} className={i === 3 ? 'col-start-2' : ''}> ...en primer lugar, debe guardar los data.allMdx.nodes en un estado, estoy seguro de que ya lo sabe
luego, cada vez que desee intercambiar algún elemento con otro, puede hacer esto:
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> );