title: How To Export State From Another module of reactjs
body: <p>We are starting to work on a project as 3 students who are new to react. I wanted to split the code so everyone could work on something at once. But when I tried to use a state from icon-bar.js in App.js I got error messages.
  App.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import './App.css';
  import IconBar from './components/icon-bar';
  import Events from './components/events';
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;h1 className="Title"&gt;ENAKS&lt;/h1&gt;
        &lt;IconBar /&gt;
        &lt;Events /&gt;
    &lt;div className="mainModeFrame"&gt;&lt;p1&gt;{this.state.mode}&lt;/p1&gt;&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>icon-bar.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import '../App.css';
  
  class IconBar extends Component {
      constructor() {
          super()
          this.state = {
              mode: 'Hi'
          }
      }
      render() {
          return(
                  &lt;div className="icon-bar"&gt;
                  &lt;div className="iconHolder"&gt;
                  &lt;img src="/images/2dlogo.png" alt="" className="icons" onClick={() =&gt; this.setState({mode: '2d'})}/&gt;
                  &lt;img src="/images/3dlogo.png" alt="" className="icons" onClick={() =&gt; this.setState({mode: '3d'})}/&gt;
                  &lt;img src="/images/flag.png" alt="" className="icons" onClick={() =&gt; this.setState({mode: 'edit'})}/&gt;
                  &lt;img src="/images/tracker.png" alt="" className="icons" onClick={() =&gt; this.setState({mode: 'track'})}/&gt;
          &lt;div&gt;{this.state.mode}&lt;/div&gt;
                  &lt;/div&gt;
           &lt;/div&gt;
                )
      }
  }
  
  
  export default IconBar;
  </code></pre>
  
  <p>How can I use my "mode" state to change my p1 in the App.js</p>