How do you join an array of strings and HTML elements in React?

Question

I have a list of names that I need to return with commas in between, so normally I'd just use .join, but one item in the list will need to have the icon of a star next to it based on if a condition is met, which doesn't work in the join. Is there something similar to a join that I could use that doesn't turn everything into a string so that it displays the HTML element instead of returning 'name, [Object, object]'? I tried using dangerouslySetInnerHTML, but it continues to just say name, [Object, object] instead of name, <Icon name='star' />name2 with an actual star displaying, not the text for the component.

You could wrap each name in a <span> which should allow you to place an <Icon /> as a sibling to the string. Then just render the array of spans like normal. — Michael Lyons
– Michael Lyons, Commented May 31, 2017 at 23:47

Michael Lyons · Accepted Answer · 2017-06-01 00:15:56Z

1

So if Icon is another React element, you should wrap each name is a <span> element so that as you loop through the array, you can add the Icon as a sibling to the correct string content.

It could look like this:

names.map((name, i) => {
   return <span key={i}>
           { 
            name === focusName ? // However you determine where the star goes
            <Icon name="star" /> :
            null
           }
           { // Add a comma to name if not last item
             name + (i < names.length - 1 ? ',' : '')
           } 
          <span>
});

answered Jun 1, 2017 at 0:15

Michael Lyons

5843 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do you join an array of strings and HTML elements in React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related