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

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>

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

Collectives™ on Stack Overflow

How to isolate click event on React.js?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related