CODEWITHSUNDEEP
reactjs
jgb
jgb

Reputation: 231

React onClick event for multiple divs

I'm trying to create an onClick event that adds a classname for each of these elements without writing out three different functions. The event is fired on all three when one is clicked, however. How can I modify this so that the onClick only works for the one that is clicked?

const userVote = React.createClass({

    getInitialState: function() {
        return {
          condition: false
        }
      },
      handleClick: function() {
        this.setState({
          condition: !this.state.condition
        });
      },


    render() {
        return(

                <div onClick={this.handleClick} className= { this.state.condition ? "positive active" : "positive"}></div>

                <div onClick={this.handleClick} className= { this.state.condition ? "neutral active" : "neutral"}>Not Sure</div>

                <div onClick={this.handleClick} className= { this.state.condition ? "negative active" : "negative"}></div>

        );
    }
});

Upvotes: 4

Views: 6512

Answers (2)

Hardik Modha
Hardik Modha

Reputation: 12746

As you said, you want only one div active at a time. You can maintain a single state variable which will keep track of an active div.

handleClick: function(divName) {
    this.setState({
        activeDiv: divName
    });
}

<div>
   <div onClick={() => this.handleClick('div1')} className= { this.state.activeDiv === 'div1' ? "positive active" : "positive"}>Div1</div>

   <div onClick={() => this.handleClick('div2')} className= { this.state.activeDiv === 'div2' ? "neutral active" : "neutral"}>Div2</div>

   <div onClick={() => this.handleClick('div3')} className= { this.state.activeDiv === 'div3' ? "negative active" : "negative"}>Div3</div>
</div>

I've created a state variable named activeDiv which will keep track of an active div, and when applying className you can check whether the current div is active or not.

Here, is the working Plunker: Plunker (ES6 Syntax)

JSFiddle (ES5 Syntax)

PS: You'll need to open browser console to see the results.

Upvotes: 6

Robsonsjre
Robsonsjre

Reputation: 1606

You can try this approach:

  • First of all, you need to return just one div on render's return, so. encapsulate it

  • Modify a little bit your condition on this.state

  • Add another parameter on onClick function

Something like that:

const userVote = React.createClass({
getInitialState: function() {
    return {
      div1: false,
      div2: false,
      div3: false
    }
  },
  handleClick: function(divNumber) {
    this.setState({
      divNumber: !this.state.condition
    });
  },


render() {
    return(
         <div>
            <div onClick={() => this.handleClick('div1')} className= { this.state.condition ? "positive active" : "positive"}></div>

            <div onClick={() => this.handleClick('div2')} className= { this.state.condition ? "neutral active" : "neutral"}>Not Sure</div>

            <div onClick={() => this.handleClick('div3')} className= { this.state.condition ? "negative active" : "negative"}></div>
        </div>
    );
}

});

Upvotes: 1

Related Questions