Change Color of Icon in React

Question

I have a one React component 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?

Answer 1

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