CODEWITHSUNDEEP
reactjs
adam08
adam08

Reputation: 3

Having multiple className

I'm trying to show a border-bottom with a different color when my menu is active but there's a problem with className on my React code that it doesn't allow me to use multiple className and if anyone has any idea to solve this? 

.NavigationItem{
    margin: 0;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    align-items: center;
}
.NavigationItem a{
    color: white;
    text-decoration: none;
    height: 100%;
    padding: 14px;
    border-bottom: 4px solid transparent;
    box-sizing: border-box;
    display: block;
    background-color: rgb(49, 110, 223);

}
.NavigationItem a:hover,
.NavigationItem a:active,
.NavigationItem a.active{
    background-color: rgb(33, 77, 158);
    border-bottom: 4px solid greenyellow;
    color: white;

}
import React from 'react';
import classes from './NavigationItem.css';

const navigationItem = (props) => (
        <ul className={navigationitem}>
            <a href={props.link} className={props.active ? navigationitem.active: null}>{props.children}</a>
            </ul>
);

let navigationitem = ['NavigationItem'].join('');

export default navigationItem;

Upvotes: 0

Views: 56

Answers (1)

Miroslav Pap&#237;rn&#237;k
Miroslav Pap&#237;rn&#237;k

Reputation: 779

Use template literal: className={`${navigationitem}${props.active ? ` ${navigationitem.active}` : ''}`} or use classnames library for joining classNames.

Upvotes: 2

Related Questions