JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="wrapper">
    <nav id="sidebar">
        <li class="active">
				  <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
					<i class="far fa-file-alt"></i>
					Pages
				  </a>
			</li>
    </nav>
</div>

CSS

a[data-toggle="collapse"] {
    position: relative;
}

a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
    font-family: "Font Awesome 5 Free";
    content: "\f106";
    font-weight: 900;
    display: block;
    position: absolute;
    right: 20px;
    font-size: 0.6em;
}

a[aria-expanded="true"]::before {
    font-family: "Font Awesome 5 Free";
    content: "\f106";
}

JavaScript

$(document).ready(function () {
    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
        $(this).toggleClass('active');
    });
});