Adding and removing active class from elements

Question

I'm trying to add and remove active class when I click on different panels that triggers a transition, so if I click on different panels it works, as in it triggers the transition and then it ends it when other panel gets clicked, but if I want to click on a panel that was already opened and closed it won't trigger it again on the first click adn that's not good UX. I'm writing it in React and I am a beginner so maybe I'm not doing something right. You can see the code below, I hope I gave all the right information.

componentDidMount() {
    ReactDom.findDOMNode(this).addEventListener("transitionend", (e) => {
      if (
        e.propertyName.includes("flex") &&
        e.target.classList.contains("open")
      ) {
        e.target.classList.add("open-active");
      }
    });

    ReactDom.findDOMNode(this).addEventListener("click", (e) => {
      const elems = document.querySelector(".open-active");
      if (elems !== null) {
        elems.classList.remove("open-active", "open", "opac");
      }
      e.target.className = "open-active";
      console.log(e);
    });
  }

  render() {
    const { index, top, bottom, image, open, onClick } = this.props;

    const style = {
      backgroundImage: `url(${image})`,
    };

    const openValue = open ? "open opac" : "";
    return (
      <div
        className={`panel ${openValue}`}
        style={style}
        onClick={() => {
          onClick(index);
        }}
      >
</div>

And the CSS

.panel > * {
  margin: 0;
  width: 100%;
  transition: transform 0.5s;
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.panel > *:first-child {
  transform: translateY(-100%);
}

.panel.open-active > *:first-child {
  transform: translateY(0);
}

.panel > *:last-child {
  transform: translateY(100%);
}

.panel.open-active > *:last-child {
  transform: translateY(0);
}

.panel p:nth-child(2) {
  font-size: 4em;
}

.panel.open {
  font-size: 16px;
  flex: 5;
}

Does this answer your question? [Toggle Class in React](https://stackoverflow.com/questions/36403101/toggle-class-in-react) — Emile Bergeron, Apr 22 '20 at 19:18
Typically one doesn't use `addEventListener` and `classList` in React. Rather, you bind the list of classes to something in state, and changes to the state cause the class to be added or removed. — Heretic Monkey, Apr 22 '20 at 19:18
I understand it might not be the best practice, I'll try to change it to make it better. — Bogdan, Apr 23 '20 at 12:13

score 0 · Answer 1 · answered Apr 22 '20 at 19:35

Hi you can follow this example:

import React, {useState} from "react";
import './styles/style.css'

export default function ShowHideExample() {
    const [cssClass, setCssClass] = useState('hide');

    return (
        <div className="App">
            <h2>Show or Hide div</h2>
            <button onClick={() => {
                (cssClass === 'hide')? setCssClass('show') :  setCssClass('hide');
            }}>Click me to show or hide the div
            </button>
            <div className={cssClass}>
                <h1>This is dynamically shown</h1>
            </div>
        </div>
    );
}

Here is the style.css file

.show{
    display: block;
    background: dodgerblue;
    padding:20px;
}

.hide{
    display: none;
}

maybe it's not what I am looking for, I can post my website here to see how it works if it helps. I'm still stuck and trying to figure it out , again, I'm a beginner and might get stuck easily — Bogdan, Apr 23 '20 at 12:16
@BogdanMatei, as you mention adding or removing the class from the element that's why I added this example. if you need anything other than this. please mention — Khabir, Apr 23 '20 at 12:46

Adding and removing active class from elements

1 Answers1