EN
JavaScript - combine names (e.g. CSS class names)
10 points
In this short article, we would like to show how using JavaScript, create simple function that combines names omitting empty or falsy values.
Quick solution:
xxxxxxxxxx1
const combineNames = (names) => {2
let result = '';3
for (let i = 0; i < names.length; ++i) {4
const name = names[i];5
if (name) {6
if (result) {7
result += ' ';8
}9
result += name;10
}11
}12
return result;13
};14
15
16
// Usage example:17
18
console.log(combineNames('button', 'dark', 'inactive')); // button dark inactive19
console.log(combineNames('button', 'dark', 'active')); // button dark active20
console.log(combineNames('button', null, undefined, '')); // button
Imagine you want to assign multiple class names to className property omitting undefined one in React application, e.g.
xxxxxxxxxx1
<div className={combineNames(style.button, style.dark, style.acive)}></div>Let's suppose dark mode style is undefined, so we expect to get finally:
xxxxxxxxxx1
<div className={`${style.button} ${style.acive}`}></div>
