What is the proper way to concatenate strings with JavaScript (JSX) template literals when one is after comma

Question

I have two strings which I want to concatenate using template literals. Second one is optional and I want to put it after comma (if exist). I know I can do something like this (but it doesn't look proper to me):

<div> {a} {b ? `, ${b}` : ''} </div>

[a, b].filter(i => i).join(", ") - if you don't insist about literals — Sasha
– Sasha, Commented Feb 28, 2019 at 15:51
Yes and no, its relative to what you find to be more readable. And also on whether or not you are planning to add more variables later on — Treycos
– Treycos, Commented Feb 28, 2019 at 15:58
@Treycos I don't need to add more variables there and I'm looking here for the most proper way to do it — viciousP
– viciousP, Commented Feb 28, 2019 at 16:00

Sasha · Accepted Answer · 2019-02-28 18:27:01Z

You can incapsulate logic to filter empty and joining into the component member (or util function), i.e.:

const concatNotEmptyBy = (separator) => (...args) => args .filter(n => n) // filter empty .join(separator);

and next call it in your component:

<div> {concatNotEmptyBy(', ')(a, b)} </div>

however, if it's only 1 place and only 2 variables then your original way is totally ok.

Collectives™ on Stack Overflow

What is the proper way to concatenate strings with JavaScript (JSX) template literals when one is after comma

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related