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

va         


        

Answer 1

Since you already have component calling a function on its parent, you do not need additional state: simply pass the filter to the component as a prop, and use this in rendering your buttons. Like so:

Change your render function inside your component to:

render: function() {
  return 

    All
    male
    female
    blonde
  
},

And add a function inside :

_checkActiveBtn: function(filterName) {
  return (filterName == this.props.activeFilter) ? "btn active" : "btn";
}

And inside your component, pass the filter state to the component as a prop:

return 

  
Kids Finder
 
  
  {list}

Then it should work as intended. Codepen here (hope the link works)