Source:  Twitter logo

I need add class "active" after click to button and remove all other "active" classes.

Look here please:

var Tags = React.createClass({
  setFilter: function(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>

var Kid = React.createClass({
  render: function() {
    return <ul>

var List = React.createClass({
  getInitialState: function() {
    return {
      filter: ''
  changeFilter: function(filter) {
      filter: filter
  render: function() {
    var list = this.props.Data;

    if (this.state.filter !== '') {
      list = list.filter((i)=> i.tags.indexOf(this.state.filter) !== -1);

    list ={
      return <Kid {...Props} />

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

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?

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(){}
isActive: function(){}

check out the code on the link

45 users liked answer #0dislike answer #045
Dayan Moreno Leon profile pic
Dayan Moreno Leon

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
22 users liked answer #1dislike answer #122
tomasbarrios profile pic

Taken from their site.

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

8 users liked answer #2dislike answer #28
RayLoveless profile pic

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>

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} />

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

5 users liked answer #3dislike answer #35
wintvelt profile pic

you can also use pure js to accomplish this like the old ways with jquery

try this if you want a simple way

3 users liked answer #4dislike answer #43
jerryurenaa profile pic
const activeState = (e)=>{
    var id =
    const idArray = ["homeBtn","aboutBtn","servicesBtn","portfolioBtn","testmBtn","blogBtn","contactBtn"]

    idArray.forEach((element)=> {

0 users liked answer #5dislike answer #50
Hritwij Shrivastava profile pic
Hritwij Shrivastava

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).