How to add a class with React js

Question

I need add class  active  after click to button and remove all other  active  classes   Look here please  https   codepen io azat-io pen RWjyZX  var Tags   React createClass     setFilter  function filter        this props onChangeFilter filter          render  function         return  lt div className  tags  gt         lt button className  btn active  onClick  this setFilter bind this       gt All lt  button gt         lt button className  btn  onClick  this setFilter bind this   male    gt male lt  button gt         lt button className  btn  onClick  this setFilter bind this   female    gt female lt  button gt         lt button className  btn  onClick  this setFilter bind this   child    gt child lt  button gt         lt button className  btn  onClick  this setFilter bind this   blonde    gt blonde lt  button gt        lt  div gt           var Kid   React createClass     render  function         return  lt ul gt         lt li gt  this props name  lt  li gt         lt  ul gt           var List   React createClass     getInitialState  function         return         filter                   changeFilter  function filter        this setState         filter  filter                render  function         var list   this props Data       if  this state filter                 list   list filter  i   gt  i tags indexOf this state filter      -1         console log list               list   list map function Props         return  lt Kid     Props    gt               return  lt div gt         lt h2 gt Kids Finder lt  h2 gt         lt Tags onChangeFilter  this changeFilter   gt         list       lt  div gt           var options       Data          name   Eric Cartman       tags    male    child             name   Wendy Testaburger       tags    female    child             name   Randy Marsh       tags    male             name   Butters Stotch       tags    male    blonde    child             name   Bebe Stevens       tags    female    blonde    child            var element   React createElement List  options   React render element  document body     How do I make it better here

User · Answer

you can also use pure js to accomplish this like the old ways with jquery  try this if you want a simple way   document getElementById  myID   classList add  show-example

User · Answer

Since you already have  lt Tags gt  component calling a function on its parent  you do not need additional state  simply pass the filter to the  lt Tags gt  component as a prop  and use this in rendering your buttons  Like so   Change your render function inside your  lt Tags gt  component to   render  function       return  lt div className    tags  gt       lt button className    this  checkActiveBtn      onClick    this setFilter bind this       gt All lt  button gt       lt button className    this  checkActiveBtn  male    onClick    this setFilter bind this   male    gt male lt  button gt       lt button className    this  checkActiveBtn  female    onClick    this setFilter bind this   female    gt female lt  button gt       lt button className    this  checkActiveBtn  blonde    onClick    this setFilter bind this   blonde    gt blonde lt  button gt     lt  div gt       And add a function inside  lt Tags gt     checkActiveBtn  function filterName      return  filterName    this props activeFilter     btn active     btn       And inside your  lt List gt  component  pass the filter state to the  lt tags gt  component as a prop   return  lt div gt     lt h2 gt Kids Finder lt  h2 gt      lt Tags filter    this state filter  onChangeFilter    this changeFilter    gt     list   lt  div gt    Then it should work as intended  Codepen here  hope the link works

User · Answer

this is pretty useful   https   github com JedWatson classnames  You can do stuff like  classNames  foo    bar         gt   foo bar  classNames  foo     bar  true          gt   foo bar  classNames    foo-bar   true          gt   foo-bar  classNames    foo-bar   false          gt     classNames   foo  true      bar  true          gt   foo bar  classNames   foo  true  bar  true          gt   foo bar      lots of arguments of various types classNames  foo     bar  true  duck  false     baz     quux  true          gt   foo bar baz quux      other falsy values are just ignored classNames null  false   bar   undefined  0  1    baz  null              gt   bar 1    or use it like this  var btnClass   classNames  btn   this props className       btn-pressed   this state isPressed     btn-over    this state isPressed  amp  amp  this state isHovered

User · Answer

It is simple  take a look at this   https   codepen io anon pen mepogj editors 001  basically you want to deal with states of your component so you check the currently active one  you will need to include  getInitialState  function       and  isActive  function       check out the code on the link

User · Answer

Taken from their site   render       let className    menu     if  this props isActive        className      menu-active         return  lt span className  className  gt Menu lt  span gt      https   reactjs org docs faq-styling html

[javascript] How to add a class with React.js?

Examples related to javascript

Examples related to jquery

Examples related to reactjs