I wasn't sure how to word this question effectively without writing an essay.
I have this component that accepts 3 props, titleArr, title and boldIndexes.
The basic concept is in some components that render the aforementioned component, an array of strings will be created. And then certain indexes within that array will be passed as the boldIndexes prop. The title prop is the initial array of strings, converted to a string.
An example would be the following
const personal = 5;
const friends = 1;
const titleArr = [
'You currently have ',
// this item will be bold
personal > 0 ? `${personal} saved item${personal > 1 ? 's' : ''} ` : null,
friends > 0 ? `${personal > 0 ? 'and ' : ''}` : '. ',
// this item will be bold
friends > 0 ? `${friends} item${friends > 1 ? 's' : ''} ` : null,
friends > 0 ? 'saved by your friends.' : null,
];
const boldIndexes = [titleArr[1], titleArr[3]];
const title = titleArr.join('');
So in the example above
[
'You currently have ',
'5 saved items',
'and ',
'1 item',
'saved by your friends.',
]
[
'5 saved items',
'1 item',
]
'You currently have 5 saved items and 1 item saved by your friends.',
In my component, I want something like the following;
<StyledComponentTitle>
You currently have
<StyledComponentBoldTitle>5 saved items</StyledComponentBoldTitle>
and
<StyledComponentBoldTitle>1 item</StyledComponentBoldTitle>
saved by your friends.
</StyledComponentTitle>
or
<StyledComponentTitle>
You currently have
</StyledComponentTitle>
<StyledComponentBoldTitle>
5 saved items
</StyledComponentBoldTitle>
<StyledComponentTitle>
and
</StyledComponentTitle>
<StyledComponentBoldTitle>
1 item
</StyledComponentBoldTitle>
<StyledComponentTitle>
saved by your friends.
</StyledComponentTitle>
Is this achievable without having to do dangerouslySetInnerHTML
You can map the array and return the styled part with an if so you know if you need to make it bold or not.
titleArr.map((el, index) => {
if (index == 1 || index == 3) {
return "<StyledComponentBoldTitle>" + el + "</StyledComponentBoldTitle>"
} else {
return el;
}
});
Hope this answer your question.
When mapping your array, test if the current index is included in bold indices array, and if so, add a className to your span (I've used span since it has a native block display).
export const App2 = () => {
const personal = 5;
const friends = 1;
const titleArr = [
"You currently have ",
// this item will be bold
personal > 0 ? `${personal} saved item${personal > 1 ? "s" : ""} ` : null,
friends > 0 ? `${personal > 0 ? "and " : ""}` : ". ",
// this item will be bold
friends > 0 ? `${friends} item${friends > 1 ? "s" : ""} ` : null,
friends > 0 ? "saved by your friends." : null
];
const boldIndices = [1, 3];
return (
<>
{titleArr.map((text, idx) => {
const cls = boldIndices.includes(idx) ? "bold" : "";
// inside your stylesheet: .bold {font-weight: bolder}
return (
<span key={text} className={cls}>
{text}
</span>
);
})}
</>
);
};