CODEWITHSUNDEEP
javascriptreactjssemantic-ui
user11206142
user11206142

Reputation:

Prevent multiple button color activation in ReactJS

I have two buttons with ReactJS and SemanticUI. When each one is clicked, the background color changes. I would like to have only one button activated at a time, meaning that if the red one is clicked, the green one deactivates and vice-versa, taking back the default white background color. Right now both can be clicked with the color change at the same time.

Here's my component: 

export class BoutonRefus extends Component {
  constructor(props) {
    super(props);
    this.state = {
      button: true
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      button: !this.state.button
    });
  }
  render() {
    return (
      <>
        <div
          className={
            this.state.button
              ? "ui button medium refus true"
              : "ui button medium refus false"
          }
          onClick={this.handleClick}
        ></div>
      </>
    );
  }
}

export class BoutonAccepte extends Component {
  constructor(props) {
    super(props);
    this.state = {
      button: true
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      button: !this.state.button
    });
  }
  render() {
    return (
      <>
        <div
          className={
            this.state.button
              ? "ui button medium accepte true"
              : "ui button medium accepte false" && 
          }
          onClick={this.handleClick}
        ></div>
      </>
    );
  }
}

This component is called here:

boutonAccepter(t) {
        return (
            <>
            <BoutonAccepte 
            className="ui button medium accepte true"
            onClick={() => {this.voter(true)}}
            text={t('flot.split.vote.accepter')}
                />
            </>
        )
    }

boutonRefuser(t) {
        return (
            <>
            <BoutonRefus 
            className="ui button medium refus true"
            onClick={() => {
                this.justifierRefus()
                this.voter(false)
            }}
            text={t('flot.split.vote.refuser')}
            />
            </>
        )
    }

Upvotes: 1

Views: 1330

Answers (2)

Mantas Giniūnas
Mantas Giniūnas

Reputation: 692

You don't need a class component for that. Just use useState() hook for your local state and make a functional component. Also, making different components for each button seems redundant. Try this, just paste your classnames ofcourse :)

  function Buttons(){
   const [selectedButton, setSelectedButton] = React.useState();

   return (
      <div>
          <button type="button" 
             className={selectedButton === "refuse" ? "active-classname" : "inactive-classname"}
             onClick={() => setSelectedButton("refuse")}>Refus</button>
          <button type="button" 
             className={selectedButton === "refuse" ? "active-classname" : "inactive-classname"}
             onClick={() => setSelectedButton("refuse")}>Accepte</button>
      </div>
   ); 
}

Upvotes: 0

Aldrin
Aldrin

Reputation: 2194

Lift the state outside of the Button component and handle the state in a parent component, Button component can use prop to determine the colour of the button, The prop can be passed from parent component contains both buttons

This might help - https://codesandbox.io/s/red-green-button-5t7ds

Upvotes: 1

Related Questions