title: ReactJS :: How to Show Only Relevant Menu Items and Hide Other Menu Items Upon Page Change
body: <p>I am doing an online Full Stack Web Developer Bootcamp and have just been introduced to React JS events and am having some difficulty implementing the following instructions:</p>
  <blockquote>
  <p>The menu component should only display relevant items. For example, if
  the user is on the “shop” page, the “shop” menu item should no longer
  be displayed.</p>
  </blockquote>
  <p>I have tried executing this via the &quot;activeClassName&quot; and CSS method, but this is unfortunately not recognized as a DOM property.</p>
  <p>I have also tried following guides and previous Stack Overflow questions' answers that offer solutions such as this: <a href="https://www.pluralsight.com/guides/how-to-show-and-hide-reactjs-components" rel="nofollow noreferrer">https://www.pluralsight.com/guides/how-to-show-and-hide-reactjs-components</a></p>
  <p>Unfortunately I have had no success as yet and would appreciate any assistance that anyone is willing to offer. It would be great to learn how to make use of this for future projects.</p>
  <p>My code is as follows:</p>
  <p><strong>Navigation.js</strong></p>
  <pre><code>import React from 'react';
  // Imported components from React Bootstrap.
  import {Container, Col, Row, Navbar, Nav, NavLink, NavItem} from &quot;react-bootstrap&quot;;
  
  function Navigation() {
    return (
      &lt;div&gt;
        &lt;Navbar id=&quot;navbar&quot;&gt;
  
          &lt;Container&gt;
            &lt;Row id=&quot;navrow&quot;&gt;
  
              &lt;Col id=&quot;navcol&quot; className=&quot;d-none d-lg-flex&quot;&gt;
                &lt;Nav className=&quot;mrx-auto&quot; navbar&gt;
  
                  &lt;NavItem className=&quot;navitem&quot;&gt;
                    &lt;NavLink className=&quot;navlink&quot; href=&quot;/Profile&quot;&gt;&lt;img src=&quot;./images/profile.png&quot; alt=&quot;View Your Profile&quot; title=&quot;View Your Profile&quot; id=&quot;profileimg&quot; /&gt;&lt;/NavLink&gt;
                  &lt;/NavItem&gt;
  
                  &lt;NavItem className=&quot;navitem&quot;&gt;
                    &lt;NavLink className=&quot;navlink&quot; href=&quot;/&quot;&gt;HOME&lt;/NavLink&gt;
                  &lt;/NavItem&gt;
  
                  &lt;NavItem className=&quot;navitem&quot;&gt;
                    &lt;NavLink className=&quot;navlink&quot; href=&quot;/Shop&quot;&gt;SHOP&lt;/NavLink&gt;
                  &lt;/NavItem&gt;
  
                &lt;/Nav&gt;
              &lt;/Col&gt;
  
            &lt;/Row&gt;
          &lt;/Container&gt;
  
        &lt;/Navbar&gt;
      &lt;/div&gt;
    )
  }
  
  export default Navigation;
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>// Imported react libraries and components.
  import React, { Component } from 'react';
  // Imported css styles.
  import './App.css';
  // Imported components.
  import Navigation from './components/Navigation';
  import Header from './components/Header';
  import Profile from './components/Profile';
  import Landing from './components/Landing';
  import Products from './components/Products';
  import { BrowserRouter, Route, Switch } from 'react-router-dom';
  // Constructed a boolean value to determine whether a user is signed in or not. 
  const loggedIn = true;
  // Constructed a map array of objects to display the &quot;Landing/ About Us&quot; information. 
  const landings =
    [{
      id: &quot;1&quot;,
      landing_description: &quot;We officially opened our doors June of 2020 and have created an environment that caters for anyone, no matter your fitness level. We pride ourselves in delivering professional services and providing top-performing equipment and facilities to our clients. Our mission is to create a healthier lifestyle for our staff, as well as for our customers. Our job is to provide you with a better quality life, whether it is upping your fitness levels or whether you want that body that you have been longing for.&quot;
    }];
  // Constructed a map array of objects to display the products' information. 
  const products =
    [{
      id: &quot;2&quot;,
      product_name: &quot;Classic Package&quot;,
      product_price: &quot;R250.00 P/M&quot;,
      product_image: &quot;./images/gym.jpg&quot;,
      product_description: &quot;We have all of the equipment that is needed to enable anyone to achieve their ultimate goal. Our gym also have an indoor pool and a canteen for healthy refreshments and food items. Gain access to our facilities and start your transformation.&quot;
    },
    {
      id: &quot;3&quot;,
      product_name: &quot;Elite Package&quot;,
      product_price: &quot;R350.00 P/M&quot;,
      product_image: &quot;./images/spinning.jpg&quot;,
      product_description: &quot;This membership plan gains you access to all of the equipment, as well as give you the option of joining up to two of our classes. Whether you are into spinning classes, yoga, aerobics, boxing or showing off your moves in a Zumba Fitness class.&quot;
    },
    {
      id: &quot;4&quot;,
      product_name: &quot;Pro Package&quot;,
      product_price: &quot;R450.00 P/M&quot;,
      product_image: &quot;./images/personal.jpg&quot;,
      product_description: &quot;This membership plan grants you full access to all of our facilities and classes. In addition you also get assiged a personal trainer that will help you with your work-out plans, as well as meal plans. This is the ultimate package, which should give you your desired outcome at a faster pace.&quot;
    }];
  
  console.log(typeof products);
  // Rendering and returning data to be exported to Index.js.
  class App extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;BrowserRouter&gt;
            &lt;div className=&quot;App&quot;&gt;
              {/* Included a link to the App.js stylesheet. */}
              &lt;link
                rel=&quot;stylesheet&quot;
                href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css&quot;
                integrity=&quot;sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS&quot;
                crossOrigin=&quot;anonymous&quot;
              /&gt;
              &lt;Navigation /&gt;
              {/* Added Header component. */}
              &lt;Header name=&quot;Code Reviewer&quot; loggedIn={loggedIn} /&gt;
              {/* Added Landing component. */}
              &lt;Switch&gt;
              &lt;Route exact={true} path=&quot;/&quot; render={() =&gt; (
                &lt;Landing landings={landings} /&gt;
              )} /&gt;
              &lt;Route path=&quot;/Profile&quot; render={() =&gt; (
              &lt;Profile /&gt;
              )} /&gt;
              {/* Added Products component. */}
              &lt;Route path=&quot;/Shop&quot; render={() =&gt; (
                &lt;Products products={products} /&gt;
              )} /&gt;
              &lt;/Switch&gt;
            &lt;/div&gt;
          &lt;/BrowserRouter&gt;
        &lt;/div&gt;
      );
    }
  }
  
  // Exporting to render App component in Index.js where the ReactDom.Render() method is called.
  export default App;
  </code></pre>
  <p>Please do let me know if any further information is required.</p>