Vfrdtyky

I have a tree menu component which is outputting the following format:

<li class="rct-node rct-node-parent rct-node-collapsed">

<span class="rct-title">192.168.1.61</span></span></span></li>

I need to get the class of the li when the "rct-title" value is clicked so that I can run a conditional statement if the class is "rct-node". I'm a JS newbie and am wondering if there is an easy way to do this.

Note that class is not valid syntax for React (jsx) it should be className

Having said that, you can use e.target.parentElement.className

Like so:

class App extends Component {

  handleGetClassName = e => {

    console.log(e.target.parentElement.className);

  };

  render() {

    return (

      <div>

        <li

          className="rct-node rct-node-parent rct-node-collapsed"

          onClick={this.handleGetClassName}

        >

          <span className="rct-title">192.168.1.61</span>

        </li>

      </div>

    );

  }

}

It will console.log a string rct-node rct-node-parent rct-node-collapsed

UPDATE:

If you only need the first className you can do this:

  handleGetClassName = e => {

    const className = e.target.parentElement.className.split(' ')[0];

    console.log(className);

  };

Now it will give you only rct-node