From an array of strings, use a component to render certain indexes of array of strings in a differe-CodePudding

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

titleArr

[
  'You currently have ',
  '5 saved items',
  'and ',
  '1 item',
  'saved by your friends.',
]

boldIndexes

[
  '5 saved items',
  '1 item',
]

title

'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>

<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

CodePudding user response：

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;
  }
});

CodePudding user response：

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>
        );
      })}
    </>
  );
};