How to dynamically add a class to manual class names

Question

I need to add a dynamic class to a list of regular classes  but have no idea how  I m using babel   something like this    lt div className  wrapper searchDiv  this state something   gt       lt  div gt    Any ideas

User · Answer

A simple possible syntax will be    lt div className   wrapper searchDiv   this state something    gt

User · Answer

className  css styles mainDiv   subContainer      This solution is tried and tested in React SPFx    Also add import statement    import   css   from  office-ui-fabric-react lib Utilities

User · Answer

getBadgeClasses         let classes    badge m-2        classes     this state count     0     badge-warning     badge-primary       return classes      lt span className  this getBadgeClasses    gt Total Count lt  span gt

User · Answer

Here is the Best Option for Dynamic className   just do some concatenation like we do in Javascript        className            badge              this state value    badge-primary      badge-danger                m-4

User · Answer

Depending on how many dynamic classes you need to add as your project grows it s probably worth checking out the classnames utility by JedWatson on GitHub  It allows you to represent your conditional classes as an object and returns those that evaluate to true    So as an example from its React documentation   render       var btnClass   classNames      btn   true     btn-pressed   this state isPressed     btn-over    this state isPressed  amp  amp  this state isHovered      return  lt button className  btnClass  gt I m a button  lt  button gt         Since React triggers a re-render when there is a state change  your dynamic class names are handled naturally and kept up to date with the state of your component

User · Answer

You can either do this  normal JavaScript   className   wrapper searchDiv     this state something    or the string template version  with backticks   className   wrapper searchDiv   this state something      Both types are of course just JavaScript  but the first pattern is the traditional kind   Anyway  in JSX  anything enclosed in curly brackets is executed as JavaScript  so you can basically do whatever you want there  But combining JSX strings and curly brackets is a no-go for attributes

User · Answer

try this using hooks  const  dynamicClasses  setDynamicClasses    React useState        quot dynamicClass1 quot    quot dynamicClass2 quot       and add this in className attribute    lt div className  wrapper searchDiv       dynamicClasses    gt       lt  div gt   to add class       const addClass   newClass   gt           setDynamicClasses     dynamicClasses  newClass          to delete class           const deleteClass  classToDelete   gt                setDynamicClasses dynamicClasses filter class    gt                 class     classToDelete

User · Answer

If you need style names which should appear according to the state condition  I prefer to use this construction    lt div className   wrapper searchDiv     this state something      a      anotherClass          gt

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     class3    class4           class5   function     return false         class6   function     return true          lt div className  getClassNames  class1  true  class2   false      gt

User · Answer

If you re using css modules this is what worked for me  const  condition  setCondition    useState false       toggle condition  return      lt span className     styles always     condition   styles sometimes         gt     lt  span gt

User · Answer

const ClassToggleFC       gt        const  isClass  setClass    useState false      const toggle       gt           setClass  prevState   gt   prevState           return         lt  gt           lt h1 className   isClass    quot heading quot     quot  quot   gt  Hiii There  lt  h1 gt          lt button onClick  toggle  gt Toggle lt  button gt         lt   gt            I simply created a Function Component  Inside I take a state and set initial value is false   I have a button for toggling state   Whenever we change state  rerender component and if state value  isClass  is false h1 s className should be  quot  quot  and if state value   isClass  is  true h1 s className is  quot heading quot

[css] How to dynamically add a class to manual class names?

Examples related to css

Examples related to reactjs