How to add multiple classes to a ReactJS Component

Question

I am new to ReactJS and JSX and I am having a little problem with the code below    I am trying to add multiple classes to the className attribute on each li    lt li key  index  className  activeClass  data class   main-class   gt  lt  li gt    My React component is   var AccountMainMenu   React createClass     getInitialState  function         return   focused  0            clicked  function index        this setState   focused  index             render  function         var self   this      var accountMenuData                     name   My Account           icon   icon-account                           name   Messages           icon   icon-message                           name   Settings           icon   icon-settings                          name  Help  amp amp  Support  amp nbsp   lt span class  font-awesome icon-support  gt  lt  span gt  888  664 6261           listClass  no-mobile last help-support last                        return          lt div className  acc-header-wrapper clearfix  gt           lt ul className  acc-btns-container  gt             accountMenuData map function data  index                var activeClass                    if  self state focused    index                  activeClass    active                              return                  lt li                 key  index                  className  activeClass                  onClick  self clicked bind self  index                  gt                   lt a href     className  data icon  gt                     data name                   lt  a gt                 lt  li gt                                        lt  ul gt         lt  div gt                  ReactDOM render  lt AccountMainMenu   gt   document getElementById  app-container

User · Answer

You can create an element with multiple class names like this, I tryed these both way, its working fine...

If you importing any css then you can follow this way : Way 1:

import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
  render() {
    return (
      <div className={[styles.class1, styles.class2].join(' ')}>
        { 'text' }
      </div>
    );
  }
}

way 2:

import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
  render() {
    return (
      <div className={styles.class1 + ' ' + styles.class2}>
        { 'text' }
      </div>
    );
  }
}

**

If you applying css as internal :

_x000D_

const myStyle = {_x000D_
  color: "#fff"_x000D_
};_x000D_
_x000D_
// React Element using Jsx_x000D_
const myReactElement = (_x000D_
  <h1 style={myStyle} className="myClassName myClassName1">_x000D_
    Hello World!_x000D_
  </h1>_x000D_
);_x000D_
_x000D_
ReactDOM.render(myReactElement, document.getElementById("app"));

_x000D_

.myClassName {_x000D_
  background-color: #333;_x000D_
  padding: 10px;_x000D_
}_x000D_
.myClassName1{_x000D_
  border: 2px solid #000;_x000D_
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>_x000D_
<div id="app">_x000D_
  _x000D_
</div>

_x000D_

User · Answer

This can be achieved with ES6 template literals   lt input className   base-input-class   class1    class2    gt    edited for clarity

User · Answer

When I have many varying classes  I have found the following to be useful    The filter removes any of the null values and the join puts all the remaining values into a space separated string   const buttonClasses          Button        disabled    disabled    null      active    active    null   filter  class    gt  class  join        lt button className  buttonClasses  onClick  onClick  disabled  disabled   disabled   false  gt

User · Answer

If you wanna use a double conditional css module is always somehow confusing so i would advise you to follow this pattern import styles from  quot   styles module css quot   const Conditonal   large  redColor     gt     return     lt div className   large  amp  amp  styles large     redColor  amp  amp  styles color  gt            lt  div gt        export default Conditonal  and if its just one conditonal statement with two class name  use this import styles from  quot   styles module css quot   const Conditonal   redColor     gt     return     lt div className  styles large    redColor  amp  amp  styles color  gt            lt  div gt        export default Conditonal

User · Answer

Vanilla JS   No need for external libraries - just use ES6 template strings    lt i className     styles  foo-bar-baz    fa fa-user fa-2x    gt

User · Answer

I know this is a late answer  but I hope this will help someone   Consider that you have defined following classes in a css file  primary    font-i    font-xl     The first step would be to import the CSS file  Then    x000D   x000D   lt h3 class         primary      font-i   font-xl   gt  HELLO WORLD  lt  h3 gt  x000D   x000D   x000D    would do the trick   For more info  https   www youtube com watch v j5P9FHiBVNo amp list PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3 amp index 20

User · Answer

Using facebook s TodoTextInput js example   render         return          lt input className           classnames             edit  this props editing             new-todo   this props newTodo                     type  text          placeholder  this props placeholder          autoFocus  true          value  this state text          onBlur  this handleBlur          onChange  this handleChange          onKeyDown  this handleSubmit    gt               replacing classnames with plain vanilla js code will look like this   render         return          lt input         className                this props editing    edit          this props newTodo    new-todo                           type  text          placeholder  this props placeholder          autoFocus  true          value  this state text          onBlur  this handleBlur          onChange  this handleChange          onKeyDown  this handleSubmit    gt

User · Answer

I bind classNames to the css module imported to into the component   import classNames from  classnames    import   as styles from     STYLES PATH   const cx   classNames bind styles      classnames gives the ability to declare className for a React element in a declarative way   ex     lt div classNames  cx styles titleText   gt  Lorem  lt  div gt    lt div classNames  cx  float-left    gt  Lorem  lt  div gt     global css declared without css modules  lt div classNames  cx   test     0                 styles titleText                 styles subTitleText   gt   Lorem  lt  div gt     conditionally assign classes   lt div classNames  cx styles titleText   float-left    gt  Lorem  lt  div gt    combine multiple classes

User · Answer

I usually use it like this    in your case         lt li  key  index  className            component                activeClass  activeClass    not-an-active-class                  data class        data class     no-data-class            gt    When it comes to JSX and  usually  we have some json    than you loop it     component map  plus some conditional to check if json property exists to render class name depending on property value from JSON  In example below component color  and component dark shade  are properties from component map        lt div className            component                component color  component color    no-color                  component dark shade        component dark shade     light           gt    Output    lt div class  component no-color light        Or   lt div class  component blue dark       depending on values from map

User · Answer

I use ES6 template literals  For example   const error   this state valid         error  const classes    form-control round-lg   error     And then just render it    lt input className  classes    gt    One-liner version    lt input className   form-control round-lg   this state valid         error       gt

User · Answer

Just adding  we can filter out empty strings   className         read-more-box       this props className      this state isExpanded    open     close     filter x   gt    x  join

User · Answer

Just use a comma  const useStyles   makeStyles  theme    gt      rightAlign      display   flex     justifyContent   flex-end        customSpacing      marginTop  theme spacing 2 5             lt div className   classes rightAlign  classes customSpacing   gt Some code lt  div gt

User · Answer

for more classes adding      className     classes hello    classes hello1

User · Answer

This is how you can do that with ES6   className            text-right         itemId     activeItemId    active                anotherProperty     true    class1     class2        You can list multiple classes and conditions and also you can include static classes  It is not necessary to add an additional library   Good luck

User · Answer

Late to the party  but why use third party for such a simple problem   You could either do it as  Huw Davies mentioned - the best way  1   lt i className     styles  foo-bar-baz    fa fa-user fa-2x    gt  2   lt i className   styles  foo-bar-baz     fa fa-user    fa-2x   join         Both are good  But writing can become complex for a large app  To make it optimal  I do the same above things but put it in a helper class  Using my below helper function  allows me to keep the logic separate for future editing  and also gives me multiple ways to add the classes  classNames styles  foo-bar-baz    fa fa-user    fa-2x     or  classNames  styles  foo-bar-baz    fa fa-user    fa-2x      This is my helper function below  I ve put it in a helper js where I keep all my common methods  Being such a simple function  I avoided using 3rd party to keep control  export function classNames  classes        if classes  amp  amp  classes constructor     Array            return classes join            else if arguments 0      undefined            return     arguments  join                return

User · Answer

You can use arrays and then join them using space    lt li key  index  className   activeClass  data class   main-class   join       gt  lt  li gt    This will result in     lt li key  index  class  activeClass data class main-class  gt  lt  li gt

User · Answer

It can be done with https   www npmjs com package clsx    https   www npmjs com package clsx  First install it   npm install --save clsx   Then import it in your component file   import clsx from   clsx     Then use the imported function in your component    lt div className   clsx classes class1  classes class2   gt

User · Answer

That s what I do   Component   const Button      className      gt       lt div className   className   gt   lt  div gt       Calling Component    lt Button className    hashButton free anotherClass    gt

User · Answer

Generally people do like  lt div className      head   style class1   Style class2  join         gt  lt div gt    But you can choose to Create a function to do this job function joinAll    classes      return classes join  quot   quot      then call it like -  lt div className  joinAll  head   style class1   style class2   gt  lt div gt

User · Answer

Concat No need to be fancy I am using CSS modules and it s easy import style from   css style css     lt div className  style style1        style style2    gt   This will result in   lt div class  quot src-client-css-pages-style1-selectionItem src-client-css-pages-style2 quot  gt   In other words  both styles Conditionals It would be easy to use the same idea with if s const class1   doIHaveSomething   style style1    backupClass     lt div className  class1         style style2    gt   ES6 For the last year or so I have been using the template literals  so I feel its worth mentioning  i find it very expressive and easy to read     class1  anotherClass   class1

User · Answer

I don t think we need to use an external package for just adding multiple classes  I personally use  lt li className   li active   gt Stacy lt  li gt   or  lt li className   li   this state isActive    active          gt Stacy lt li gt   or  lt li className   li      this state isActive    active          gt Stacy lt li gt   the second and third one in case you need to add or remove classes conditionally

User · Answer

I am using React 16 6 3 and  Material UI 3 5 1  and is able to use arrays in className like className   classes tableCell  classes capitalize    So in your example  the following would be similar    lt li key  index  className   activeClass  data class   main-class    gt  lt  li gt

User · Answer

Just use JavaScript    lt li className   activeClass  data klass   main-class   join         gt    If you want to add classes based keys and values in an object you can use the following   function classNames classes      return Object entries classes       filter   key  value     gt  value       map   key  value     gt  key       join          const classes        maybeClass   true     otherClass   true     probablyNotClass   false      const myClassNames   classNames classes      Output   maybeClass otherClass    lt li className  myClassNames    gt    Or even simpler   const isEnabled   true  const isChecked   false    lt li className   isEnabled  amp  amp   enabled   isChecked  amp  amp   checked      filter e   gt    e     join          gt     Output      lt li className   enabled     gt

User · Answer

Maybe classnames can help you   var classNames   require  classnames    classNames  foo     xx-test   true  bar  false     ox-test   false         gt   foo xx-test

User · Answer

You could do the following     lt li key  index  className     activeClass    data class  main-class   gt  lt  li gt    A short and simple solution  hope this helps

User · Answer

Use https   www npmjs com package classnames  import classNames  from  classnames     Can use multiple classes using comas seperated    lt li className  classNames classes tableCellLabel  classes tableCell   gt Total lt  li gt   Can use multiple classes using comas separated with condition     lt li className  classNames classes buttonArea   nodes length  amp  amp  classes buttonAreaHidden   gt Hello World lt  li gt      Using array as props to classNames will also work  but gives warning e g   className   classes tableCellLabel  classes tableCell

User · Answer

I use rc-classnames package       ES6 import c from  rc-classnames       CommonJS var c   require  rc-classnames      lt button className  c  button        button--disabled   isDisabled     button--no-radius    hasRadius       gt    You can add classes in any format  Array  Object  Argument   All truthy values from arrays or Arguments plus keys in objects that equal to true get merged together    for example   ReactClassNames  a    b    c        gt   a b c  ReactClassNames    a   true   b   false  c   true          gt   a c  ReactClassNames undefined  null   a   0   b        gt   a b

User · Answer

I use classnames when there is a fair amount of logic required for deciding the classes to  not  use  An overly simple example           var liClasses   classNames          main-class   true         activeClass   self state focused     index              return   lt li className  liClasses  gt  data name  lt  li gt          That said  if you don t want to include a dependency then there are better answers below

User · Answer

You can create an element with multiple class names like this    lt li className  class1 class2 class3  gt foo lt  li gt    Naturally  you can use a string containing the class names and manipulate this string to update the class names of the element   var myClassNammes    class1 class2 class3        lt li className  myClassNames  gt foo lt  li gt

User · Answer

clsx makes this simple    quot The clsx function can take any number of arguments  each of which can be an Object  Array  Boolean  or String  quot  -- clsx docs on npmjs com  Import it  import clsx from  clsx   Use it   lt li key  index  className  clsx activeClass  data class   quot main-class quot    gt  lt  li gt

User · Answer

Create a function like this function cssClass    c      return c join  quot   quot      Call it when needed   lt div className  cssClass  quot head quot  Style element  quot black quot    gt  lt div gt

User · Answer

If you don t feel like importing another module  this function works like the classNames module   function classNames rules        var classes           Object keys rules  forEach item   gt                if  rules item               classes     classes length               item             return classes      You can use it like this   render         var classes   classNames            storeInfoDiv   true             hover   this state isHovered    this props store store id                return            lt SomeComponent style  classes    gt

[javascript] How to add multiple classes to a ReactJS Component?

Examples related to javascript

Examples related to css

Examples related to reactjs

Examples related to ecmascript-6