This will be a pretty short post that I hope that many of you find helpful. So we originally had an inelegant solution for dealing with lists as we wanted the ability to dynamically use<strong> tags.

// ORIGINALexportdefaultfunctionListText({isBold=false}){constanimals=['Dog','Cat','Rhino','Penguin'];returnanimals.map((animal,index)=>{consttotalAnimals=animals.length;constlast=index===totalAnimals-1;constcomma=!last&&totalAnimals>2;constor=totalAnimals>=2&&last;constrenderAnimal=isBold?<strong>{animal}</strong>:animal;return(<React.Fragmentkey={index}>{or&&'or'}{renderAnimal}{comma&&','}{!last&&''}</React.Fragment>})}

The above piece of code would render
Dog, Cat, Rhino, or Penguin

Because my team was on a tight deadline this piece of code however unsightly was allowed through to production. To be fair, this code works as expected but I took it upon myself to see if I could find a better solution.

Intl.ListFormat to the rescue

I encourage you all to read the MDN documentation aboutIntl.ListFormat but essentially it allows you to enable language-sensitive list formatting. That's right, this will work with any language 🤯

exportdefaultfunctionListText({isBold=false}){constanimals=['Dog','Cat','Rhino','Penguin'];returnnewIntl.ListFormat('en',{style:'long',type:'disjunction'}).formatToParts(animals).map(({type,value})=>{returntype==='element'&&isBold?<strong>{value}</strong> : value;})}

The above piece of code would still render
Dog, Cat, Rhino, or Penguin

Let's break this down.

1. We create a new instance of the Intl.ListFormat
2. We set our list format to use English 'en' and set our config to use a style of'long' and type of'disjunction'.
3. We pass our animals array to theformatToParts method which will return us a new array with thecommas andor inserted (the length becomes 5)
4. We map through the returned array and check if the type is anelement. Theelement will always coincide with the value from our array where as the typeliteral will be thecomma oror respectively.
5. We check if ourisBold prop is set totrue and return the value between the<strong> tags, otherwise we just pass the value.

More extensible

Our code is now more extensible. For example we could pass in an array as one of our props instead of the declaredanimals array. We could also add a prop to change thetype in the Intl.ListFormat to allow us to have 'and' instead of 'or'.

Finishing up

I hope developers running into a similar issue find this to be a bit more useful. You can mess around with the CodePen below.