dagda1 dagda1 - 11 days ago 5
React JSX Question

messy classnames construction

Can anyone suggest a way to clean up this messy classname construction:

const ButtonTemplate = props => {
const themed = `btn-${props.theme}`
const themedButton = `${styles[themed]} ${themed}${(props.disabled) ? ' disabled' : ''}}`

return (
<button className={`${styles.btn} ${themedButton}`} type='button' onClick={props.onClick}>{props.children}</button>
)
}

Answer

What about

function ButtonTemplate({theme, disabled, onClick, children}) {
  const themed = `btn-${theme}`;
  return (
    <button className={[
      styles.btn,
      styles[themed],
      themed,
      disabled ? 'disabled' : ''
    ].join(" ")} type='button' onClick={onClick}>{children}</button>
  );
}
Comments