Question: I have a stateless component which acts like an accordion. On click of the container div I toggle a couple of css classes on some of the child components. Is it okay it directly change the classes in the dom or should I be converting this stateless component to a stateful component and handle the class toggle through the state?

```
import React, {PropTypes} from "react"

const Accordian = ({children,label,align}) => {
    return(
            <div class={"accordian-tab " + (align === "left" ? "accordian-tab-left" : "")} onClick={
                (e) => {
                    e.target.parentNode.getElementsByClassName("panel")[0].classList.toggle("show");
                    e.target.parentNode.getElementsByClassName("accordion")[0].classList.toggle("active");
                }
            }>
                <button class="accordion">{label}<i class="material-icons arrow-icon">keyboard_arrow_down</i></button>
                <div class="panel">
                    {children}
                </div>
            </div>
    )
}

Accordian.propTypes = {
    label: PropTypes.string.isRequired
}

export default Accordian;

```

Answer: 
If you are not worried about the state being stored then you should be fine to leave it stateless. However there is a chance that the component will be redrawn if your props change, at which point you would lose its "state" and the component would seemingly reset.
As ndonohoe said, your changes might be undone on re-render. One way to prevent this from happening is to store the active state of your component in a parent component's state, pass it down as props, and also pass down a method that changes that active state on the parent. This way, the stateless child can call the stateful parent's methods without knowing how that method works internally.