React Js conditionally applying class attributes

Question

I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this    lt TopicNav showBulkActions  this   hasMultipleSelected    gt            hasMultipleSelected  function       return false    return true or false depending on data           var TopicNav   React createClass   render  function     return        lt div className  row  gt           lt div className  col-lg-6  gt               lt div className  btn-group pull-right  this props showBulkActions    show     hidden    gt                   lt button type  button  className  btn btn-default dropdown-toggle  data-toggle  dropdown  aria-expanded  false  gt                    Bulk Actions  lt span className  caret  gt  lt  span gt                   lt  button gt                   lt ul className  dropdown-menu  role  menu  gt                     lt li gt  lt a href     gt Merge into New Session lt  a gt  lt  li gt                     lt li gt  lt a href     gt Add to Existing Session lt  a gt  lt  li gt                     lt li className  divider  gt  lt  li gt                     lt li gt  lt a href     gt Delete lt  a gt  lt  li gt                   lt  ul gt               lt  div gt           lt  div gt       lt  div gt                   Nothing is happening however  with the  this props showBulkActions    show     hidden    Am I doing anything wrong here

User · Accepted Answer

The curly braces are inside the string  so it is being evaluated as string  They need to be outside  so this should work    lt div className   btn-group pull-right      this props showBulkActions    show     hidden    gt    Note the space after  pull-right   You don t want to accidentally provide the class  pull-rightshow  instead of  pull-right show   Also the parentheses needs to be there

User · Answer

you can simply do the following for example  let currentDir   i18n  amp  amp  i18n language   i18n language     en     quot ml quot     quot mr quot     quot ml quot    className   flex flex-col lg flex-row list-none   currentDir -auto

User · Answer

Expending on  spitfire109 s fine answer  one could do something like this   rootClassNames       let names     my-default-class      if  this props disabled  names push  text-muted    other-class       return names join           and then within the render function    lt div className  this rootClassNames    gt  lt  div gt    keeps the jsx short

User · Answer

You can use this npm package  It handles everything and has options for static and dynamic classes based on a variable or a function      Support for string arguments getClassNames  class1    class2        support for Object getClassNames  class1  true  class2   false        support for all type of data getClassNames  class1    class2   null  undefined  3    class3    class4           class5   function     return false         class6   function     return true          lt div className  getClassNames  show    class1  true  class2   false      gt      show class1

User · Answer

you can use this    lt div className   btn-group pull-right     this props showBulkActions     show      hidden    gt

User · Answer

In case you will need only one optional class name    lt div className   btn-group pull-right      this props showBulkActions    show         gt

User · Answer

I would like to add that you can also use a variable content as a part of the class   lt img src  src  alt  Avatar  className   img-    messages key  sender    gt    The context is a chat between a bot and a user  and the styles change depending of the sender  this is the browser result    lt img src  http   imageurl  alt  Avatar  class  img-bot  gt

User · Answer

lt div className    foo   condition  amp  amp   bar   filter Boolean  join         gt    filter Boolean  removes  quot falsey quot  values from the array  Since class names must be strings  anything other than that would not be included in the new filtered array   x000D   x000D  console log     foo   true   amp  amp   bar   filter Boolean  join         console log     foo   false  amp  amp   bar   filter Boolean  join         x000D   x000D   x000D   Above written as a function  const cx       list    gt  list filter Boolean  join          usage   lt div className  cx  foo   condition  amp  amp   bar      gt    x000D   x000D  var cx       list    gt  list filter Boolean  join      console log   cx  foo   1  amp  amp   bar   1  amp  amp   baz      console log   cx  foo   0  amp  amp   bar   1  amp  amp   baz      console log   cx  foo   0  amp  amp   bar   0  amp  amp   baz      x000D   x000D   x000D

User · Answer

A function to return the correct class based on a param  if present    getClass param       let podClass    classA      switch param toLowerCase             case  B               podClass     classB              break          case  C               podClass     classC              break            return podClass    Now just invoke this function from the div where the corresponding class is to be applied    lt div className  anyOtherClass   this getClass param    I successfully used this logic to apply the correct color to my bootstrap table rows

User · Answer

Replace    lt div className  btn-group pull-right  this props showBulkActions    show     hidden    gt     with    lt div className   btn-group pull-right   this props showBulkActions    show     hidden

User · Answer

You can use ES6 arrays instead of classnames  The answer is based on Dr  Axel Rauschmayer article  Conditionally adding entries inside Array and object literals    lt div className                      classAlwaysPresent                        Array from condition  amp  amp    classIfTrue                      join         gt

User · Answer

More elegant solution  which is better for maintenance and readability   const classNames     js-btn-connect     if  isSelected    classNames push  is-selected        lt Element className  classNames join        gt

User · Answer

Or use npm classnames  It is very easy and useful especially for constructing  the list of classes

User · Answer

Reference to  split fire answer  we can update it with template literals  which is more readable For reference Checkout javascript template literal   lt div className   btn-group pull-right   this props showBulkActions    show     hidden     gt

User · Answer

Based on the value of this props showBulkActions you can switch classes dynamically as follows    lt div        this props showBulkActions      className   btn-group pull-right show         className   btn-group pull-right hidden     gt

User · Answer

You can use here String literals  const Angle     show     gt        const angle    fa   show    fa-angle-down     fa-angle-right         return  lt i className  angle    gt

User · Answer

2019   React is lake a lot of utilities  But you don t need any npm package for that   just create somewhere the function classnames and call it when you need   function classnames obj     return Object entries obj  filter  e   gt  e 1    map  e  gt e 0    join           or   function classnames obj    return Object entries obj  map    k v     gt  v k      join           example    stateClass        foo true      bar false      pony 2       classnames stateClass     return  foo pony        lt div className  foo bar  classnames stateClass    gt  some content  lt  div gt    Just For Inspiration  declare helper element and used it toggle method   DOMToken List classList toggle class condition     example    const classes   document createElement  span   classList    function classstate obj     for  let n in obj  classes toggle n obj n     return classes

User · Answer

This would work for you  var TopicNav   React createClass   render  function      let  myClasses    btn-group pull-right  this props showBulkActions  show   hidden      return                                lt div className   myClasses  gt                                  lt  div gt

User · Answer

As others have commented  classnames utility is the currently recommended approach to handle conditional CSS class names in ReactJs   In your case  the solution will look like   var btnGroupClasses   classNames     btn-group      pull-right            show   this props showBulkActions       hidden    this props showBulkActions                lt div className  btnGroupClasses  gt     lt  div gt    As a side note  I would suggest you to try to avoid using both show and hidden classes  so the code could be simpler  Most likely you don t need to set a class for something to be shown by default

User · Answer

If you are using a transpiler  such as Babel or Traceur  you can use the new ES6  template strings    Here is the answer of  spitfire109  modified accordingly    lt div className   btn-group pull-right   this props showBulkActions    shown     hidden     gt    This approach allows you to do neat things like that  rendering either s-is-shown or s-is-hidden    lt div className   s-  this props showBulkActions    is-shown     is-hidden     gt

User · Answer

This is useful when you have more than one class to append  You can join all classes in array with a space       const visibility   this props showBulkActions    show        lt div className    btn-group pull-right   visibility  join       gt

[javascript] React Js conditionally applying class attributes

Examples related to javascript

Examples related to css

Examples related to twitter-bootstrap-3

Examples related to reactjs

Examples related to class-attributes