React - 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?
let navigationitem = ['NavigationItem'].join(''); is a variable created for styling

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;
.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;

}

what does navigationitem.active points to in the Ternary expression?

navigationitem is the className I have defined

Do you have the full code somewhere? There are some things that jump out at me but I don’t know if those things that jump out at me are problems or not without seeing more. Just from a perspective of reading someone else’s code, using NavigationItem, navigationItem, navigationitem is harder to follow than using a different name rather than just different capitalization. I know you know what it means, but just my thought when I was reading it.

navigationitem and navigationItem both being variable names is confusing (something like const classNames = [ would be saner, for example).

Also, components need capitalized names: you’re exporting default, so you can give it that capitalised name wherever it is imported, but again, this is confusing.

You’re also trying to use navigationitem before it has declared.

Also, why can you not just write

<ul className="NavigationItem">

And then you can have as many as you like,

<ul className="foo bar baz" />

Or interpolate things

<ul className={`foo bar ${active ? 'baz' : 'quux'`} />

Your suggestion looks good because I have been using variables for styling because I was using the same CSS file for multiple files so I’ve created variables to avoid multiple styling on all pages if I use a class from CSS. So I will start separating all files and use one CSS File for one JS File and not use all files with JS in the same CSS File to style them.

I’m not quite sure what you mean here – why are you using the same CSS file for different pages? When you use className, it just means you’re using CSS classes: className is the same as class in HTML. What you get is a single CSS file out the other end. So anything that is in common across files, just style them together – give them common classes or style tags, import in index.js, etc.

Just because it’s React doesn’t mean you use CSS differently, it’s just the name of the attribute that is different to HTML. The importing of the CSS files – that’s just a convenience, so you can write some CSS that relates to a specific component and have it in a separate small file close to the component while developing, webpack is just going to take all those and glue them together into one file, it doesn’t do anything clever.

If you’re using JS to style the components then that is different, but you aren’t doing that.

1 Like