title: Conditional rendering of a static partial in react - MERN
body: <p>I am trying to figure out how to conditionally render a partial in react. My condition is that when a list item is active, the partial should be rendered.</p>
  
  <p>I am using bootstrap, which has an active element available for use.</p>
  
  <p>My goal is to achieve something similar to intercom's terms page: <a href="https://www.intercom.com/terms-and-policies#billing" rel="nofollow noreferrer">https://www.intercom.com/terms-and-policies#billing</a></p>
  
  <p>In my main menu, I have:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  var Terms = require('../overview/terms.jsx');
  var Privacy = require('../overview/privacy.jsx');
  var Cookies = require('../overview/cookies.jsx');
  var Thirdparty = require('../overview/thirdparty.jsx');
  var Website = require('../overview/website.jsx');
  var Sla = require('../overview/sla.jsx');
  var Acceptable = require('../overview/acceptable.jsx');
  var Billing = require('../overview/billing.jsx');
  var Information = require('../overview/information.jsx');
  var Incident = require('../overview/incident.jsx');
  var Bug = require('../overview/bug.jsx');
  
  
  class Menu extends React.Component {
  
  render() {
      return (
        &lt;div&gt;
          &lt;div className = "row"&gt;
            &lt;div className = "col-md-8 col-md-offset-2 generalhead"&gt;
              Terms and Policies
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className = "row"&gt;
            &lt;div className = "col-md-3 col-md-offset-1"&gt;
              &lt;ul className="list-group"&gt;
  
                &lt;a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "terms"&gt;Terms of Service&lt;/a&gt;
                &lt;a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "privacy"&gt;Privacy Policy&lt;/a&gt;
                &lt;a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "cookies"&gt;Cookies&lt;/a&gt;
                &lt;a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "thirdparty"&gt;Third Party Processors&lt;/a&gt;
                &lt;a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "website"&gt;Website Use&lt;/a&gt;
                &lt;a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "sla"&gt;Service Level Agreement&lt;/a&gt;
                &lt;a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "acceptable"&gt;Acceptable Use&lt;/a&gt;
                &lt;a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "billing"&gt;Billing&lt;/a&gt;
                &lt;a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "information"&gt;Information Security&lt;/a&gt;
                &lt;a href="#" className="list-group-item list-group-item-action disabled listitems" data-attribute = "incident"&gt;Incident Response Plan&lt;/a&gt;
                &lt;a href="#" className="list-group-item list-group-item-action disabled listitems" data-attribute = "bug"&gt;Bug Bounty&lt;/a&gt;
  
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div className = "col-md-6 col-md-offset-1"&gt;
               &lt;Terms /&gt;
               &lt;Privacy /&gt;
               &lt;Cookies /&gt;
               &lt;Thirdparty /&gt;
               &lt;Website /&gt;
               &lt;Sla /&gt;
               &lt;Acceptable /&gt;
               &lt;Billing /&gt;
               &lt;Information /&gt;
               &lt;Incident /&gt;
               &lt;Bug /&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  module.exports = Menu;
  </code></pre>
  
  <p>Each list item has a named data attribute. When that attribute is the active item, I want to then render the partial. At the moment all of them are rendering.</p>
  
  <p>I have read the react docs on conditional rendering: <a href="https://facebook.github.io/react/docs/conditional-rendering.html" rel="nofollow noreferrer">https://facebook.github.io/react/docs/conditional-rendering.html</a></p>
  
  <p>I was trying to define a const called active that I thought might make use of the bootstrap class - but that isn't working. I must have the wrong end of the stick for how to do this. I seems like a simple hide show for a rails js toggle. I can't figure out how to get started on tackling this in react.</p>
  
  <p>Can anyone give me a steer in the right direction?</p>