How to add a class with React.js?

I need to add the class active after clicking on the button and remove all other active classes.

Look here please:

var Tags = React.createClass({ setFilter: function(filter) { this.props.onChangeFilter(filter); }, render: function() { return <div className="tags"> <button className="btn active" onClick={this.setFilter.bind(this, '')}>All</button> <button className="btn" onClick={this.setFilter.bind(this, 'male')}>male</button> <button className="btn" onClick={this.setFilter.bind(this, 'female')}>female</button> <button className="btn" onClick={this.setFilter.bind(this, 'child')}>child</button> <button className="btn" onClick={this.setFilter.bind(this, 'blonde')}>blonde</button> </div> } }); var Kid = React.createClass({ render: function() { return <ul> <li>{this.props.name}</li> </ul> } }); 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)=> i.tags.indexOf(this.state.filter) !== -1); console.log(list); } list = list.map(function(Props){ return <Kid {...Props} /> }); return <div> <h2>Kids Finder</h2> <Tags onChangeFilter={this.changeFilter}/> {list} </div> } }); 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?

6 Answers

It is simple. take a look at this

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

this is pretty useful:

You can do stuff like

classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar': true }); // => 'foo-bar' classNames({ 'foo-bar': false }); // => '' classNames({ foo: true }, { bar: true }); // => 'foo bar' classNames({ foo: true, bar: true }); // => 'foo bar' // lots of arguments of various types classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux' // other falsy values are just ignored classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1' 

or use it like this

var btnClass = classNames('btn', this.props.className, { 'btn-pressed': this.state.isPressed, 'btn-over': !this.state.isPressed && this.state.isHovered }); 

Taken from their site.

render() { let className = 'menu'; if (this.props.isActive) { className += ' menu-active'; } return <span className={className}>Menu</span> } 

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

Change your render function inside your <Tags> component to:

render: function() { return <div className = "tags"> <button className = {this._checkActiveBtn('')} onClick = {this.setFilter.bind(this, '')}>All</button> <button className = {this._checkActiveBtn('male')} onClick = {this.setFilter.bind(this, 'male')}>male</button> <button className = {this._checkActiveBtn('female')} onClick = {this.setFilter.bind(this, 'female')}>female</button> <button className = {this._checkActiveBtn('blonde')} onClick = {this.setFilter.bind(this, 'blonde')}>blonde</button> </div> }, 

And add a function inside <Tags>:

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

And inside your <List> component, pass the filter state to the <tags> component as a prop:

return <div> <h2>Kids Finder</h2> <Tags filter = {this.state.filter} onChangeFilter = {this.changeFilter} /> {list} </div> 

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

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"); 

const activeState = (e)=>{ var id = e.target.id const idArray = ["homeBtn","aboutBtn","servicesBtn","portfolioBtn","testmBtn","blogBtn","contactBtn"] idArray.forEach((element)=> { document.getElementById(element).classList.remove("active") }); console.log(id); document.getElementById(id).classList.add("active") }