title: React: Render certain element based on certain button click
body: <p>Hi I have a react app where I am returning several buttons. What I am trying to do is depending on the button you click another component will show and render in the view. I've looked at conditional rendering in the docs but I am not sure how to tie this to the state and render what I expect. Below is a sample of whats in the component. </p>
  
  <pre><code>// import all the components I need;
  
  class FormContainer extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    dropdownVisible: false,
  };
  this.handleClick = this.handleClick.bind(this);
  </code></pre>
  
  <p>}</p>
  
  <pre><code>handleClick(event) {
  if (!this.state.dropdownVisible) {
    document.addEventListener('click', this.handleOutsideClick, false);
  } else {
    document.removeEventListener('click', this.handleOutsideClick, false);
  }
  
  this.setState(prevState =&gt; ({
    dropdownVisible: !prevState.dropdownVisible,
  }));
  }
  
  handleOutsideClick(e) {
  if (this.node.contains(e.target)) {
    return;
  }
  this.handleClick();
  }
  
  render() {
  return (
    &lt;form className="form-container"&gt;
      &lt;h2&gt;Browse The Database&lt;/h2&gt;
      // here are the two buttons
      &lt;button className="btn btn-default" onClick={this.handleClick}&gt;
        By Fiscal Year
      &lt;/button&gt;
      &lt;button className="btn btn-default" onClick={this.handleClick}&gt;
        By Research Organization
      &lt;/button&gt;
      // depending on which one is clicked either of these table containers should render with the appropriate component passed in
      &lt;div className="table-container"&gt;{this.state.dropdownVisible &amp;&amp; &lt;FiscalYearTable /&gt;}&lt;/div&gt;
      &lt;div className="table-container"&gt;
        {this.state.dropdownVisible &amp;&amp; &lt;ResearchOrganizationTable /&gt;}
      &lt;/div&gt;
    &lt;/form&gt;
  );
  }
  }
  
  export default FormContainer;
  </code></pre>
  
  <p>What is happening instead is that only one is rendering because I have not established the relationship between each button and the component I want to render. How can I establish this relationship using a conditional if or other method tied to the state?</p>