Estoy haciendo un sitio web personal y en la página de inicio tengo una versión abreviada de mi cartera. Lo que intento lograr es cambiar la alineación de la imagen y el texto cada vez que la función .map() representa un componente.

Este es mi código hasta ahora

 import Image from 'next/image'; import React, { useState } from 'react'; import portoflio from '../../Works/data'; export default function MainWork() { const works = portoflio.slice(0, 3); const [align, setAlign] = useState(false); return ( <div className="text-center"> {works.map((work) => { setAlign(!align) //The Problem Producing Line const { name, text, imageLink, keys } = work; return ( <div className="justify-center flex" key={name}> <div className={'w-60 h-60 ' + (align ? null : 'order-2')}> <Image className={'rounded-xl overflow-hidden w-full h-full'} src={'/work/' + imageLink + '.svg'} alt={'Image of ' + imageLink} width="100%" height="100%" layout="responsive" /> </div> <h1>{name}</h1> </div> ); })} </div> ); }

El operador ternario en el contenedor de imágenes debe encargarse de la alineación, pero el problema al que me enfrento es que si trato de cambiar el estado cada vez que se ejecuta el bucle, aparece este error: Traté de encontrar una imagen como referencia y esto es lo más cercano que pude encontrar: