You should consider using a simple Styled component for that case that handles all true boolean properties as class names and joins them as a string using classnames.
class Styled extends React.PureComponent { render() { const { children, tag: Tag = 'div', ...rest } = this.props; const [booleans, others] = partition(x => x === true)(rest) return (<Tag className={classNames(booleans)} {...others}> {children}</Tag> ) }}const Page = () => (<Styled Page><Styled sideMenu><Route path="/" component={SidemenuMainCont} /></Styled><Styled mainColumn><Styled Header><Header /></Styled><Styled section tag="section"><Route path="/" component={TenCont} /></Styled section><Styled footer tag="footer"><Footer /></Styled></Styled><AuthLoginModalCont /></Styled>);There is a slight variation of the idea with the use of Proxy object. However, it will break on older JS engines as it cannot be fully polyfilled but allows writing <styled.MainColumn full-width red> without declaring MainColumn beforehand and it is more easily debuggable with React Developer Tools as full names are preserved.
