Reactjs: Remove Space between classnames for a div tag with multiple classnames-CodePudding

Here the image is a boolean. In case the image is true and anotherclassName="anotherclassname". There is an extra space between someclass and someclass-anotherclassname

<div class = "someclass  someclass-anotherclassname">

How do I remove space between these classnames if image = true or if image = false and anotherclassName = " "?

 
const baseClass = "someclass"
var c = prefix(baseClass);

  <div className={`${baseClass} ${c({ active: !image })} ${anotherclassName}`.trim()}
   <p>Brooklyn</p>
</div>

CodePudding user response：

You can put the possible classes into an array, then filter and join it.

className={
  [baseClass, c({ active: !image }), anotherclassName]
    .filter(Boolean)
    .join(' ')
}

Or put the possible classes at the beginning and the end, and trimming will get rid of the extra spacing.

className={`${anotherclassName} ${baseClass} ${c({ active: !image })}`.trim()}