title: Changing a component in reactjs upon clicking a button
body: <p>I have a menu with for buttons, each one directs to a different form. So basically I just want a respective form to appear as I click each button. My current code is not updating the components, but the functions are being called:</p>
  
  <pre><code>export default class Configuration extends Component{
  
      constructor(props){
          super(props);
          this.state ={
              response:"",
          };
          currentMode ='upload';
          this.getForms = this.getForms.bind(this);
  
      }
  
      componentWillMount(){
          this.getForms('upload');
      }
  
      getForms(current_mode){
          console.log('im in', current_mode);
          switch(current_mode){
              case 'form1':
                  return (&lt;div&gt;&lt;Form1/&gt;&lt;/div&gt;);
              case 'form2':
                  return (&lt;div&gt;&lt;Form2/&gt;&lt;/div&gt;);
              case 'form3':
                  return (&lt;div&gt;&lt;Form3/&gt;&lt;/div&gt;);
              case 'form4':
                  return (&lt;div&gt;&lt;Form4/&gt;&lt;/div&gt;);
          }
      }
  
      render(){
          return (
              &lt;div&gt;
                          &lt;ConfigurationMenu getForms={this.getForms}/&gt;
                          {this.getForms(currentMode)}
              &lt;/div&gt;
  
      }
  }
  
  // here are the buttons:
  class ConfigurationMenu extends Component{
  
      constructor(props){
          super(props);
          this.state={key:1}
      }
  
      handleSelect(key, formCategory){
          console.log('hiiii', formCategory);
          this.props.getForms(formCategory);
          currentMode=formCategory;
          this.setState({key:key});
      }
  
      render(){
          return (
              &lt;Nav bsStyle="tabs" activeKey={this.state.key}&gt;
                &lt;NavItem eventKey={1} title="Form1" onClick={()=&gt;this.handleSelect(1, 'form1')}&gt;Form1&lt;/NavItem&gt;
                &lt;NavItem eventKey={2} title="Form2" onClick={()=&gt;this.handleSelect(2, 'form2')}&gt;Form2&lt;/NavItem&gt;
                &lt;NavItem eventKey={3} title="Form3" onClick={()=&gt;this.handleSelect(3, 'form3')}&gt;Form3&lt;/NavItem&gt;
                &lt;NavItem eventKey={4} title="Form4" onClick={()=&gt;this.handleSelect(4, 'form4')}&gt;Form4&lt;/NavItem&gt;
              &lt;/Nav&gt;
          );
      }
  }
  </code></pre>