title: Toggling Images for Active Links with React.js
body: <p>I am currently trying to learn React.js for a school project and am having trouble with toggling images in combination with active links (I have searched high and low for a tutorial with no avail).<br> My site is going to look similar to the old time Kingdom Hearts 1 menu theme; the Navbar looks like the following image.</p>
  
  <p><a href="https://i.stack.imgur.com/17Gmz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/17Gmz.png" alt="Example Menu"></a></p>
  
  <hr>
  
  <p>As shown in the above image, the home page is hard-coded to be "active." <br>What I need help with is making each link appear in this "active" state when selected/active. When a user clicks on one of the NavLinks, the image should go from grey to black/orange. When a link is not selected (or inactive), the image should go from black/orange back to grey. Active/selected links should also have black text while inactive links have grey. So far, all I have found out is how to toggle a singular class but not multiple. Overall, I really don't know how to go about this at all. <br>How do I toggle one NavLink active and change its image while also changing all other NavLinks to inactive, changing their images as well? Any help would be much appreciated. I have the following code for my Navbar so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class NavMenu extends Component {
    static displayName = NavMenu.name;
  
    constructor(props) {
  super(props);
  this.toggleNavbar = this.toggleNavbar.bind(this);
  this.state = {
    collapsed: true
  };
    }
  
    toggleNavbar() {
  this.setState({
    collapsed: !this.state.collapsed
  });
    }
  
    render() {
  return (
    &lt;Navbar
      fixed="bottom"
      className="navbar-expand-sm navbar-toggleable-sm ng-white border-top mb-3"
      light
    &gt;
      &lt;NavbarToggler onClick={this.toggleNavbar} className="mr-2" /&gt;
      &lt;Collapse
        className="d-sm-inline-flex flex-sm-row-reverse"
        isOpen={!this.state.collapsed}
        navbar
      &gt;
        &lt;ul className="navbar-nav mr-auto"&gt;
          &lt;NavItem&gt;
            &lt;NavLink
              tag={Link}
              id="navHome"
              className="text-dark active"
              to="/"
            &gt;
              &lt;img
                src="/Images/NLUnactiveImg.png"
                alt="Unactive Link Image"
                height="45"
                width="45"
                hidden
              /&gt;
              &lt;img
                src="/Images/NLActiveImg.png"
                alt="Active Link Image"
                height="45"
                width="45"
              /&gt;
              Home
            &lt;/NavLink&gt;
          &lt;/NavItem&gt;
          &lt;NavItem&gt;
            &lt;NavLink
              tag={Link}
              d="navResume"
              className="text-dark inactive"
              to="/resume"
            &gt;
              &lt;img
                src="/Images/NLUnactiveImg.png"
                alt="Unactive Link Image"
                height="45"
                width="45"
              /&gt;
              &lt;img
                src="/Images/NLActiveImg.png"
                alt="Active Link Image"
                height="45"
                width="45"
                hidden
              /&gt;
              Resume
            &lt;/NavLink&gt;
          &lt;/NavItem&gt;
          &lt;NavItem&gt;
            &lt;NavLink
              tag={Link}
              d="navContact"
              className="text-dark inactive"
              to="/contact"
            &gt;
              &lt;img
                src="/Images/NLUnactiveImg.png"
                alt="Unactive Link Image"
                height="45"
                width="45"
              /&gt;
              &lt;img
                src="/Images/NLActiveImg.png"
                alt="Active Link Image"
                height="45"
                width="45"
                hidden
              /&gt;
              Contact
            &lt;/NavLink&gt;
          &lt;/NavItem&gt;
          &lt;NavItem&gt;
            &lt;NavLink
              tag={Link}
              d="navFetch"
              className="text-dark inactive"
              to="/fetch-data"
            &gt;
              &lt;img
                src="/Images/NLUnactiveImg.png"
                alt="Unactive Link Image"
                height="45"
                width="45"
              /&gt;
              &lt;img
                src="/Images/NLActiveImg.png"
                alt="Active Link Image"
                height="45"
                width="45"
                hidden
              /&gt;
              Fetch data
            &lt;/NavLink&gt;
          &lt;/NavItem&gt;
        &lt;/ul&gt;
      &lt;/Collapse&gt;
      &lt;div&gt;
        {' '}
        &lt;PlaySound child={this.state.child} /&gt;{' '}
      &lt;/div&gt;
    &lt;/Navbar&gt;
  );
    }
  }</code></pre>
  </div>
  </div>
  </p>