CODEWITHSUNDEEP
javascriptclassreactjs
IntoTheDeep
IntoTheDeep

Reputation: 4118

ReactJs adding active class to button

I have five buttons, dynamically created. My target is: when any button is clicked to add active class to it, and of course if any other has that active class to remove it. How can I achieve that?

<div>
    {buttons.map(function (name, index) {
        return <input type="button" value={name} onClick={someFunct} key={ name }/>;
   })}
</div>

Upvotes: 10

Views: 52090

Answers (3)

Jamal Ashraf
Jamal Ashraf

Reputation: 935

One of the easiest solution for adding active class to the current button (highlight it) for react developers.

const {useState,Fragment} = React;

const App = () => {
  const [active, setActive] = useState("");
 
  const handleClick = (event) => {
    setActive(event.target.id);
    
  }

    return (
      <Fragment>
      <button
        key={1}
        className={active === "1" ? "active" : undefined}
        id={"1"}
        onClick={handleClick}
      >
        Solution
      </button>

       <button
       key={2}
       className={active === "2" ? "active" : undefined}
       id={"2"}
       onClick={handleClick}
     >
      By
     </button>

      <button
      key={3}
      className={active === "3" ? "active" : undefined}
      id={"3"}
      onClick={handleClick}
    >
        Jamal
    </button>
</Fragment>

    );
}


 ReactDOM.render(
  <App/>,
  document.getElementById("react")
);
.active{
background-color:red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
 <div id="react"></div>

Upvotes: 1

Arun Yokesh
Arun Yokesh

Reputation: 1354

One of the easiest way to add active class is setting state and changing that state on each switch, by the state value you can change the active class of the item.

I also had an same issue with switching the active class in list.

Example:

var Tags = React.createClass({
  getInitialState: function(){
    return {
      selected:''
    }
  },
  setFilter: function(filter) {
    this.setState({selected  : filter})
    this.props.onChangeFilter(filter);
  },
  isActive:function(value){
    return 'btn '+((value===this.state.selected) ?'active':'default');
  },
  render: function() {
    return <div className="tags">
      <button className={this.isActive('')} onClick={this.setFilter.bind(this, '')}>All</button>
      <button className={this.isActive('male')} onClick={this.setFilter.bind(this, 'male')}>male</button>
      <button className={this.isActive('female')} onClick={this.setFilter.bind(this, 'female')}>female</button>
      <button className={this.isActive('child')} onClick={this.setFilter.bind(this, 'child')}>child</button>
      <button className={this.isActive('blonde')} onClick={this.setFilter.bind(this, 'blonde')}>blonde</button>
     </div>
  }
});

hope this will help you!

Upvotes: 1

madox2
madox2

Reputation: 51841

You need to introduce state to your component and set it in onClick event handler. For example output of render method:

<div>
    {buttons.map(function (name, index) {
        return <input
                 type="button"
                 className={this.state.active === name ? 'active' : ''}
                 value={name}
                 onClick={() => this.someFunct(name)}
                 key={ name } />;
   })}
</div>

event handler (element method):

someFunct(name) {
    this.setState({ active: name })
}

Upvotes: 16

Related Questions