I am currently using clsx within a React application and encountering an issue with how to utilize it when dealing with mappings and nested components.
For instance:
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?
>
Above you can see the JSX being returned, an outer div element, and a variable isOpened sourced from the state for accessibility throughout. This allows us to implement the following containerClasses:
const containerClasses = {
'class1 ': true,
'class2': isOpened,
'class3': !isOpened
};
All seems well up to this point.
However, in the snippet where we have myData.map(...) iterating over an array, I need to determine innerClasses based on the value of open. Yet, this value is only accessible within the loop and not externally within the return or the function.
Is there a solution to this dilemma utilizing clsx?