toggle class on multiple elements react

Question

I got rendered array of filters, by clicking on element I'm pushing them to selectedProperties array, and also I want to set active class on element if it in array. How to do it properly with react? I got next code

...
render(){
  const {selectedProperties} = this.state;
  let classnames = classNames('box', {
    'active': '' //what condition apply here to set class?
  });
return (
  <div className="hotel-filter">
    <div className="filter-label">Что для вас важно?</div>
    <div className="filter-options">
      <ul className="priorities-boxes">
        {
          this.state.priorities.map(item => {
            return (
              <li key={item.id}
                  className={classnames}
                  onClick={(evt) => this.selectValue(item.id)}>
                <img src={`/images/filter-icons/${item.icon}`} />
                <span>{item.name}</span>
              </li>
            )
          })
        }
      </ul>
    </div>
  </div>
)
}

I'm using classnames utility to add class dynamically but my condition is wrong.

On your let classnames, item.id is not defined?

ChrisR
– ChrisR

2017-12-14 11:25:08 +00:00
Commented Dec 14, 2017 at 11:25 — ChrisR
– ChrisR, Commented Dec 14, 2017 at 11:25
yes. and actually I don't know what condition apply there

David
– David

2017-12-14 11:27:43 +00:00
Commented Dec 14, 2017 at 11:27 — David
– David, Commented Dec 14, 2017 at 11:27

alechill · Accepted Answer · 2017-12-14 11:34:05Z

2

You need the reference to item in order to check it is in the selected array, which cannot be done outside the loop, otherwise all would be the same, so just do it inside the loop instead for each item

render(){
  const {selectedProperties} = this.state
  return (
    <div className="hotel-filter">
      <div className="filter-label">Что для вас важно?</div>
      <div className="filter-options">
        <ul className="priorities-boxes">
          {
            this.state.priorities.map(item => {
              return (
                <li key={item.id}
                    className={classNames('box', {
                      active: selectedProperties.includes(item.id)
                    })}
                    onClick={(evt) => this.selectValue(item.id)}>
                  <img src={`/images/filter-icons/${item.icon}`} />
                  <span>{item.name}</span>
                </li>
              )
            })
          }
        </ul>
      </div>
    </div>
  )
}

answered Dec 14, 2017 at 11:34

alechill

4,56223 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David Over a year ago

Tried just now, not helped. I click on element and nothing changed. (

alechill Over a year ago

Well this will work as long as this.selectValue is actually updating the selectedProperties array. You don't show that so we can't diagnose

David Over a year ago

you right, I forget to call setState after push in array.

alechill Over a year ago

great glad its fixed!

menomanabdulla · Accepted Answer · 2019-03-18 11:09:58Z

2

This might resolve issue with multiple element class toggling.try this out:

https://jsfiddle.net/menomanabdulla/todu7m6g/11/

class ToggoleApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    
    }
    
    this.toggleClass=this.toggleClass.bind(this);
    
  }
  
   toggleClass(e){
        let classes = 'my-class';
        let els = document.getElementsByClassName('my-class active');
        if(els){
            while (els[0]) {
                els[0].classList.remove('active')
            }
        }
        e.target.className = classes.replace('my-class','my-class active');
    }
  
  render() {
    return (
      <div>
        <h2>Toggle Example</h2>
        <ul>
          <li className="my-class active" onClick={(e) =>this.toggleClass(e)}>
            One
          </li>
          <li className="my-class" onClick={(e) =>this.toggleClass(e)}>
            Two
          </li>
          <li className="my-class" onClick={(e) =>this.toggleClass(e)}>
            Three
          </li>
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<ToggoleApp />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.my-class{
  color: #FF3355;
}
.my-class.active{
  color: #33FF46;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

edited Mar 18, 2019 at 11:09

answered Mar 18, 2019 at 11:03

menomanabdulla

1751 silver badge5 bronze badges

2 Comments

Abhilash Poojary Over a year ago

one doubt why we are using while loop? even without it, its working fine for me.

menomanabdulla Over a year ago

umm! what about remove active class from previous elements? while is play main role as toggling here.

Anand Oganiya · Accepted Answer · 2021-11-21 20:57:24Z

class ToggoleApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    
    }
    
    this.toggleClass=this.toggleClass.bind(this);
    
  }
  
   toggleClass(e){
        let els = document.getElementsByClassName('my-class active');
        if(els){
            while (els[0]) {
                els[0].classList.remove('active')
            }
        }
        e.target.className = 'my-class active'
    }
  
  render() {
    return (
      <div>
        <h2>Toggle Example</h2>
        <ul>
          <li className="my-class active" onClick={(e) =>this.toggleClass(e)}>
            One
          </li>
          <li className="my-class" onClick={(e) =>this.toggleClass(e)}>
            Two
          </li>
          <li className="my-class" onClick={(e) =>this.toggleClass(e)}>
            Three
          </li>
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<ToggoleApp />, document.querySelector("#app"))

Collectives™ on Stack Overflow

toggle class on multiple elements react

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related