CODEWITHSUNDEEP
htmlcssnode.jsreactjs
Aleksa
Aleksa

Reputation: 27

Add and remove class on react buttons

I'm trying to create two buttons that will change its class when they are clicked. So when button one is clicked it will add "active" class to it and remove "active" class for sibiling button.

Now I have made some progress but the thing that is not working is that I want to add active class only when the element is clicked. So by default buttons shouldn't have any classes. When then user clicks on the first button, active class will be added to that button, then if user clicks on button two, it will remove active class from button one and add it to button two. The one more thing that isn't working as expected is when I click on the already clicked and already active button it changes the class and state. So it should be that when I click on already selected button it shouldn't do anything, the button with active state should remain active. It should basically work as jQuery toggleClass function.

My react code:

import React, { Component } from "react";
import css from "./styles.css";

export default class TypeButtons extends Component {
  constructor(props) {
    super(props);
    this.state = { isActive: true };
  }

  ToggleClass = (e) => {
    this.setState({ isActive: !this.state.isActive })
  }

  render() {
    return (
      <div className={css.buttonsContainer}>
        <button onClick={this.handleClick} className={( !this.state.isActive ? '' : 'active' )} onClick={this.ToggleClass}>
          Button 1
        </button>
        <button onClick={this.handleClick} className={( this.state.isActive ? '' : 'active' )} onClick={this.ToggleClass}>
          Button 2
        </button>
      </div>
    );
  }
}

CSS:

.active {
  background: green;
}

I have created Codesandbox example: https://codesandbox.io/s/vigorous-pare-3zo0s

So long story short, class should be added only after button has been clicked, so by default both buttons shouldn't have active class at start. Also when I click button with the active class it shouldn't change the active class, it should rather remain active, the state should only be changed when the opposite button is clicked.

Any help will mean a lot!

Upvotes: 0

Views: 1648

Answers (2)

Konstantin Modin
Konstantin Modin

Reputation: 1333

class TypeButtons extends React.Component {
  constructor(props) {
    super(props);
    this.state = { active: "0" };
    this.buttons = [
        { id: "1", title: "Button 1" },
        { id: "2", title: "Button 2" }
    ];
  }

  handleClick = e => {        
    this.setState({ active: e.target.dataset.id });
  };

  render() {
    return (
        <div>
            {this.state.active}
            {this.buttons.map(({ id, title }) => {
                return (
                    <button
                        key={id}
                        data-id={id}
                        onClick={this.handleClick}
                        className={this.state.active === id ? "active" : ""}
                    >
                        {title}
                    </button>
                );
            })}
        </div>
    );
  }
 }

Upvotes: 0

Nicolas SEPTIER
Nicolas SEPTIER

Reputation: 851

https://codesandbox.io/s/naughty-allen-vrj3r

Here, I edited your codesandbox. Basically what I store in the state is a key that identifies the active button. It's null by default since that's what you wanted.

I assigned integers to each button but that can be whatever you want. You could also keep the integers, and add your buttons via a .map() to have a dynamic number of buttons for examples (see Constantin's answer).

Upvotes: 1

Related Questions