title: React Executing a method inside a component
body: <p>I have a component like this:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class MyComponent extends Component {
  
    constructor(props, context) {
      super(props, context);
      this.state = {
        isActive: false,
      }
    }
  
    showMyComponent() {
      this.setState({
        isActive: true,
      });
    }
  
    hideMyComponent() {
      this.setState({
        isActive: false,
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Compoent Here&lt;/h1&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default MyComponent;
  </code></pre>
  
  <p>Now, on my index.js I am adding several components.</p>
  
  <pre><code>...
  
  &lt;Header /&gt;
  &lt;Nave /&gt;
  </code></pre>
  
  <p>Can I now do something like this here:</p>
  
  <pre><code>MyComponent.showMyComponent();
  </code></pre>
  
  <p>Like you normally call a function?</p>
  
  <p>If not, how is this done?</p>