madcaesar , 3 months ago

Ok how about this then, I frequently do something like this:

<span style="color:#323232;">let className = 'btn'
</span><span style="color:#323232;">  if (displayType) {
</span><span style="color:#323232;">    className += ` ${displayType}`
</span><span style="color:#323232;">  }
</span><span style="color:#323232;">  if (size) {
</span><span style="color:#323232;">    className += ` ${size}`
</span><span style="color:#323232;">  }
</span><span style="color:#323232;">  if (bordered) {
</span><span style="color:#323232;">    className += ' border'
</span><span style="color:#323232;">  }
</span><span style="color:#323232;">  if (classNameProp) {
</span><span style="color:#323232;">    className += ` ${classNameProp}`
</span><span style="color:#323232;">  }
</span>

How would this be made better with a functional approach? And would be more legible, better in anyway?