Suggestion for "elegent, legible way to stitch together classNames based on props."

[Kyle Holmberg]

As seen in https://github.com/JedWatson/classnames#usage

import React, { Component } from "react";
import classnames from "classnames";
import PropTypes from "prop-types";
import "./Card.css";

export class Card extends Component {
    render() {
        return (
            <div className={classNames("c-card", { "c-card--dark": this.props.theme === "dark" })}>
                <header className="c-card__header">
                    <h3 className="c-card__title">{this.props.title}</h3>
                    <p className="c-card__description">
                        {this.props.description}
                    </p>
                </header>
                <div className="c-card__body">{this.props.children}</div>
            </div>
        );
    }
}

Card.defaultProps = {
    styleModifier: PropTypes.oneOf(["", "c-card--dark"]),
    title: "Card Title",
    description: "This is the card description",
    children: PropTypes.node
};

You could also easily work without classnames via, but I'd prefer classNames 👍 :

<div className={`${this.props.theme === "dark" ? "c-card c-card--dark" : "c-card"}`}>

[Brad Frost]

Thanks @kylemh!

I've been using classnames, and I've found this to be a pretty readable/extensible format.

let badgeClass = classnames({
        "c-badge": true,
        "c-badge--positive": status === "Complete",
        "c-badge--negative": status === "Deprecated" || "Not Started",
        "c-badge--caution": status === "In Progress"
    })
  
    return (
      <span className={badgeClass}>{ status }</span>
    )