title: How to tell React Component that the HTML Page calling it is active
body: <p>I'm trying to reuse my HTML Navigation Bar using React and Angular Directives and I'm a little confused on how to approach it</p>
  
  <p>This is my navigationbar.html:</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
    &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="home.html"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt; &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="contact.html"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="source.html"&gt;Source&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>This is my AngularJS:</p>
  
  <pre><code>var app = angular.module("myApp", []);
  
  app.directive("NavBar", function() {
      return {
          templateUrl : 'navigationbar.html'
      };
  });
  </code></pre>
  
  <p>In all of my HTML Files I can call this navigation bar fine, but the problem is I don't know how to place the <code>&lt;span class="sr-only"&gt;(current)&lt;/span&gt;</code> and "active" class on the right html page according to which html page is calling the navigation bar. How can I move the tags to contact.html when the user is on the contact page?</p>
  
  <p>I was thinking of using React, something like this:</p>
  
  <pre><code>render() {
  if (this.state.active ???) {
    return &lt;span class="sr-only"&gt;(current)&lt;/span&gt;;
  }
  </code></pre>
  
  <p>But I'm not sure how to set it up the condition.</p>
  
  <p>Thanks!</p>