I have a one React ponent which contains iteration of div elements like below:

render(){
  return(
      <div className="col-md-12">
         {this.state.pageOfItems.map(opration =>
                <div className=" col-md-4 icondiv" key={opration.id}
                    onClick={this.selectOperation.bind(this,opration,true)}> 
                  <FontAwesome name="square"  style={{ ariaHidden:true, fontSize:'35px'}}/>
                       <span className="displayblock">{opration.name}</span>
                 </div>

          )}
      </div>
    );
}

Now my question is When I my onClick method execute I want to change clicked div's square icon color. remaining icon's color should be same. Now when I clicked on another div's icon then same should happen. How can I achieve this. I know I can set css color to different but How can I identified particular div and change color?

I have a one React ponent which contains iteration of div elements like below:

render(){
  return(
      <div className="col-md-12">
         {this.state.pageOfItems.map(opration =>
                <div className=" col-md-4 icondiv" key={opration.id}
                    onClick={this.selectOperation.bind(this,opration,true)}> 
                  <FontAwesome name="square"  style={{ ariaHidden:true, fontSize:'35px'}}/>
                       <span className="displayblock">{opration.name}</span>
                 </div>

          )}
      </div>
    );
}

Now my question is When I my onClick method execute I want to change clicked div's square icon color. remaining icon's color should be same. Now when I clicked on another div's icon then same should happen. How can I achieve this. I know I can set css color to different but How can I identified particular div and change color?

• javascript
• css
• html
• reactjs

Share Improve this question Follow asked Jun 27, 2017 at 22:03 realcodesrealcodes 26911 gold badge55 silver badges1717 bronze badges 1

• consider accepting the working answer! stackoverflow./help/accepted-answer.. you gain 2 rep points every time you accept an answer! – Rachel Gallen Commented Jun 28, 2017 at 0:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

In your state, add a member 'selectedOperationId' and update it in the 'selectOperation' callback.

Then build the className of your div conditionally like

className={operation.id === this.state.selectedOperationId ? "selected col-md-4 icondiv" : "col-md-4 icondiv"}

and make the proper css for .selected class