toggleClass React js

Question

I'm building a web app with react js. I have CSS set to that when a user selects a div it highlights and when clicked again, it deselects. This is the code I have in jquery (but it needs to be written in react).

$("#select-reward-cards .card").click(function () {
    $(this).toggleClass('selected');
    selectRewardsArray.push($(this).attr('data-value'));
});

$('.goal').click(function () {
    $(".goal").removeClass("selected");
    $(this).toggleClass('selected');
});

$("#reward-cards .card").click(function () {
    if ($(this).hasClass('selected')) {
    } else {
        $("#reward-cards .card").removeClass("selected");
        $(this).toggleClass('selected');
    }
});

My react code is as follows:

var Test = React.createClass({

 btnTapped:  function(value, thisObj) {
    console.log(value);    

},
render: function() {
var stationComponents = this.props.stations.map((station, index) => {

return <div onClick={() => this. handleSort(station, $(this))}><img src="img/test.png" />{station}</div>;

   });
    return <div>{stationComponents}</div>;
   }
});

var cards = ["amazon", "aeo", "aerie", "barnes", "bloomingdales", "bbw","bestbuy", "regal", "cvs", "ebay", "gyft", "itunes", "jcp", "panera", "staples", "walmart", "target", "sephora", "walgreens", "starbucks"];

ReactDOM.render(<Test stations={cards} />, document.getElementById('test-div'));

Please excuse my ignorance as I'm quite new to react, but how can I replicate the jquery functionality in react? Thanks.

Ori Drori · Accepted Answer · 2016-07-16 19:08:34Z

In react you don't toggle the class by checking if the class exists on the DOM element. You change the state, and every element can react to the new state (fiddle).

I've used a trinary operator to change the class, but classnames is a better solution.

var cards = ["amazon", "aeo", "aerie", "barnes", "bloomingdales", "bbw", "bestbuy", "regal", "cvs", "ebay", "gyft", "itunes", "jcp", "panera", "staples", "walmart", "target", "sephora", "walgreens", "starbucks"];

var Station = React.createClass({
  btnTapped: function() {
    this.props.onStationClick(this.props.index);
  },

  render() {
    return (
        <div className={ this.props.selected ? 'selected' : '' }
        onClick ={ this.btnTapped }>
                { this.props.children }
      </div>
    );
  }
});

var Test = React.createClass({
    getInitialState: function() {
    return {
        selected: null
    }
  },
  onStationClick: function(index) {
    this.setState({
        selected: index
    });
  },
  render: function() {
    var stationComponents = this.props.stations.map((station, index) => (
        <Station key={ index } 
             index={ index }
           selected={ this.state.selected === index }
             onStationClick = { this.onStationClick }>
           { station }
      </Station>
    ));

    return (
        <div >{ stationComponents }</div>
    );
  }
});

ReactDOM.render( 
    <Test stations={cards} />,
  document.getElementById('container')
);

Shivani · Accepted Answer · 2017-11-03 12:24:00Z

You can do it with states also. First take initial state as you want it to be selected or unselected

import React from 'react';

class Example extends React.Component {
    constructor(props){
      super(props);
        class : 'selected'
        // here initially it will show selected
    }

    toggleClass(){
      this.setState({class: this.state.class == 'selected' ? '' : 'selected'})
    }

    render(){
      return(
        <div>
           <div>
             <button onClick={this.toggleClass.bind(this)} type='button'></button> 
           </div>
           // Now pass state to div class that will toggle everytime user clicks.
           <div className={this.state.class}>
              // xyz data
           </div>
        </div>
      );
    }
}

export default Example;

Collectives™ on Stack Overflow

toggleClass React js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related