Within my ReactJS application, I have implemented a mapping function to iterate through an Object. In between each element generated from the mapping process, I am including a span containing a simple care symbol.
The following code snippet demonstrates this:
renderSecurityModes = (securityKey: string): JSX.Element => {
const { user } = this.props;
return (
<div key={securityKey} className="users-overview-screen__no-last-child">
{user && user.security && user.security[securityKey as SecurityMode] && (
<Fragment>
<span className="font-weight-medium mr-3 text-uppercase">{securityKey}</span>
<span className="text-border-gray mx-3">|</span>
</Fragment>
)}
</div>
);
};
THE ISSUE:
I aim to have the caret symbol displayed between the mapped elements, except for the last one where it should be hidden using display: none.
To achieve this, I added a specific class targeting the last child of each mapped item. However, due to the nature of the mapping process, every caret is being identified as the last-child:
Below is the associated SCSS code:
.users-overview-screen__no-last-child {
span:last-child {
display: none;
}
}
DOM STRUCTURE:
<div class="display-flex>
<span>Mapped Item 1</span>
<div class=“users-overview-screen__no-last-child”>
<span>|</span>
</div>
<span>Mapped Item 2</span>
<div class=“users-overview-screen__no-last-child”>
<span>|</span>
</div>
<span>Mapped Item 3</span>
<div class=“users-overview-screen__no-last-child”>
<span>|</span>
</div>
</div>
In this context, I specifically want the caret symbol to not appear on the very last mapped item, such as in "Mapped Item 3". However, with the current implementation of my SCSS, no caret symbol shows up at all.
Does anyone have any suggestions on how to instruct the class to only exclude the absolute last mapped item?