How to isolate click event on React.js?

Question

I have research this for quite a while, but was not able to find a solution. I have a fontawesome arrow toggle in couple of buttons, and I am trying to get them to toggle. the toggle is working, but they are all toggling at the same time. How can I isolate it to the clicked component only?

My example is massive, but I added these buttons, which pretty much has the same functionality ... so in this example, I would like just the clicked button to switch the start/stop text.

class Button extends React.Component {
  constructor() {
    super();
    this.toggleState = this.toggleState.bind(this);
    this.state = {
      isActive : false
    }
  }

  toggleState() {
    this.setState({isActive:!this.state.isActive});
  }

  render() {
    return(
      <div>
         <button className={this.state.isActive ? 'active' : 'inactive'} onClick ={this.toggleState}>{this.state.isActive ? 'STOP' : 'START'}</button>
         <button className={this.state.isActive ? 'active' : 'inactive'} onClick ={this.toggleState}>{this.state.isActive ? 'STOP' : 'START'}</button>
         <button className={this.state.isActive ? 'active' : 'inactive'} onClick ={this.toggleState}>{this.state.isActive ? 'STOP' : 'START'}</button>
      </div>
    );
  }
}

ReactDOM.render(<Button />,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

You only have a single Button element in your React tree, and there's only exactly one variable storing the state. Then you add three button elements that all do the exact same thing: toggle the single Button's state. — user5734311
– user5734311, Commented May 24, 2017 at 16:29

Mayank Shukla · Accepted Answer · 2017-05-25 07:03:25Z

2

Reason is, you are using single state variable to control all the buttons. Instead of that use an array, each value of array will be for specific button. To toggle the status of button inside toggleState function, pass the index also and use that index to toggle specific item.

Like this:

class Button extends React.Component {
   constructor() {
      super();
      this.state = {
         isActive : []
      }
  }
  
  toggleState(i) {
      let isActive = [...this.state.isActive];
      isActive[i] = !isActive[i];
      this.setState({isActive});
  }
  
  render() {
      return(
         <div>
            <button onClick = {() => this.toggleState(0)}>{this.state.isActive[0] ? 'STOP' : 'START'}</button>
            <button onClick = {() => this.toggleState(1)}>{this.state.isActive[1] ? 'STOP' : 'START'}</button>
            <button onClick = {() => this.toggleState(2)}>{this.state.isActive[2] ? 'STOP' : 'START'}</button>
        </div>
     );
  }
}

ReactDOM.render(<Button/>,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

edited May 25, 2017 at 7:03

answered May 24, 2017 at 16:28

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lucky500 Over a year ago

Thank you for the help Mayank. I will accept your answer as soon as possible. Thanks again!

Mayank Shukla Over a year ago

glad, it helped you :)

Collectives™ on Stack Overflow

How to isolate click event on React.js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related