Estoy usando clsx en una aplicación React y tengo un problema sobre cómo usarlo cuando hay asignaciones y componentes anidados.

Por ejemplo:

 return ( <div> <button onClick={doSomething}>{isOpened ? <Component1 /> : <Component2 />}</button> <div className={clsx(containerClasses)}> {myData.map((item, index) => <OuterComponent as='div' key={item.name}> {({ open }) => <> <InnerComponent className={}// how to compute this value? >

Arriba tenemos un JSX devuelto, un elemento div externo, un valor isOpened que proviene del estado, por lo que tenemos acceso a él en todas partes. Esto significa que podemos implementar las siguientes clases de containerClasses :

 const containerClasses = { 'class1 ': true, 'class2': isOpened, 'class3': !isOpened };

Todo bien hasta aquí.

Pero como puede ver, hay myData.map(...) que itera a través de una matriz. Aquí, necesitaría calcular innerClasses en función del valor de open . Pero este valor es accesible justo dentro del bucle, no fuera del retorno y dentro de la función.

¿Hay alguna manera de resolver este problema con clsx?