How to add a class to an element in React?

Question

JavaScript

There is a sidebar component. Opened by adding the class .cbp-spmenu-open

render() {
let cx = React.addons.classSet;
    let classes = cx({
      "cbp-spmenu": true,
      "cbp-spmenu-vertical": true,
      "cbp-spmenu-left": true,
      "cbp-spmenu-open": this.props.isOpen
    })
    return (
      <nav className={ classes }>
        <h3>Menu</h3>
        <a href="#">Celery seakale</a>
        <a href="#">Dulse daikon</a>
        <a href="#">Zucchini garlic</a>
        <a href="#">Catsear azuki bean</a>
        <a href="#">Dandelion bunya</a>
        <a href="#">Rutabaga</a>
      </nav>
    );
}

When adding a class from a component, the animation does not work, although if you add a class directly in the browser's DOM editor, then everything is fine. Tell me how to be?

Answer 1

Given that the state is passed through properties, this component is definitely completely re-rendered, and possibly completely replaced.
This can be cured by specifying the key attribute on the navigation menu component. In this case, there will be an update, not a rebuild.

Answer 2

I can be wrong, of course, but apparently, as far as I understand, when an element in the ReactJs element tree changes, this element is replaced by another one. Those. not just the class of the element changes, but the element changes completely, so the animation does not work. Although I may be wrong. Maybe it makes sense to just subscribe to some event and change the class using jQuery. But maybe there is a better approach.