How to toggle class onCLick in recursive component in reactjs?

Question

I am building one recursive collapsible component like

-List1
 --List 1.1
 --List 1.2
 --List 1.3
  --List 1.3.1
  --List 1.3.2
-List2
 --List 2.1
 --List 2.2
 --List 2.3
  --List 2.3.1
  --List 2.3.2

From JSON I am getting expanded=1 if any tab is already open.

Now I want to apply a Toggle Functionality on it to open and close it like Accordian.

Reference: http://prntscr.com/laowpp

My Component Code looks like this:

class List extends React.Component {
  constructor(props) {
    super(props);
    this.recursiveItems = this.recursiveItems.bind(this);
    this.toggletab = this.toggletab.bind(this);
  }
  toggletab(event) {
    event.stopPropagation();
  }
  recursiveItems(t) {
    return (
      <li
        className={[
          t.expanded == 1 ? 'active' : '',
        ].join(' ')}
      >
        <NavLink to={t.url} className="list" >
          {t.title}
        </NavLink>
        {
          t.children &&
          <List tabData={t.children} className="child" />
        }
      </li>
    );
  }
  render() {
    const { tabData } = this.props;
    return (
      <ul>
        {
          tabData.map((item) => this.recursiveItems(item))
        }
      </ul>
    );
  }
}

Answer 1

If no state changes you are doing apart from class names. You can achieve the behavior with this

 <li
  className={[t.expanded == 1 ? "active" : ""].join(" ")}
  onClick={e => {
    e.target.classList.toggle("active");
  }}
>
  <NavLink to={t.url} className="list">
    {t.title}
  </NavLink>
  {t.children && <List tabData={t.children} className="child" />}
</li>;

Feedbacks are welcome