title: onClick event to open another component outside of a parent element in reactjs?
body: <p>I have a single page react app with two components so far. <code>MenuScreen</code> and <code>HomeScreen</code>. The current onClick event within MenuScreen shows HomeScreen as a child of MenuScreen when the SpeechBubble icon is clicked. How can I trigger the onClick to show the HomeScreen Component outside of the MenuScreen? This screenshot shows what I'm trying to do.</p>
  
  <p><a href="https://i.stack.imgur.com/BWzpT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BWzpT.png" alt="enter image description here"></a></p>
  
  <p><strong>MenuScreen.js</strong></p>
  
  <pre><code>import store from '../libs/store.js';
  var jsforce = require('jsforce');
  
  class menuScreen extends React.Component {
  
      constructor(props) {
          super(props)
  
          const data = store.getState();
  
          this.state = {
              username: '',
              messages: data.messages,
              records: [],
              showModal: false,
              showChat: []  //initially blank array
          }
      }
  
      handleSearch(e) {
          this.setState({
              username: e.target.value
          })
      }
  
      handleChange(evt) {
          this.setState({
              username: evt.target.value.substr(0, 100)
          });
  
      }
  
      onClick(i, e) { 
          e.preventDefault();
  
          let showChat = this.state.showChat.slice();
          showChat[i] = !showChat[i];  //use that index to change the specific value
          this.setState({ showChat })
      }
  
      onLinkClicked() {
  
          var conn = new jsforce.Connection({
              serverUrl: 'https://cs63.salesforce.com',
              accessToken: sessionStorage.getItem('token')
          })
  
          var parent = this.state.username
          //console.log(this.state.username)
          conn.sobject("Contact").find({
                  LastName: {
                      $like: parent
                  }
              }, 'Id, Name, Phone, Account.Name'
  
          ).sort('-CreatedDate Name').
          limit(5).skip(10).execute((err, records) =&gt; { //use arrow function
              if (err) {
                  return console.error(err);
              }
              this.setState({
                  records: records,
              })
          })
  
      }
  
      render() {
          return (
              &lt;div className='menubox' id='menubox'&gt;
  
                  &lt;div className="boxbox"&gt;
                      &lt;input className="search" type="text" placeholder="Contact Last Name" onChange={this.handleChange.bind(this)} value={this.state.username} /&gt;
                      &lt;input className="submit" type="submit" onClick={this.onLinkClicked.bind(this)} value="GO" /&gt;&lt;/div&gt;
                  &lt;div&gt;
                      &lt;div&gt;
                          /*use the index also in map*/
                          {this.state.records.map((record, i) =&gt; (
                              &lt;div className="info-block block-info clearfix"&gt;
                                  &lt;div className="square-box pull-left"&gt;
                                      &lt;span className="glyphicon glyphicon-user glyphicon-lg"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;h5&gt;{record.Name}&lt;/h5&gt;
                                  &lt;h4&gt;{record.Phone}&lt;/h4&gt;
                                  &lt;p&gt;{record.Account.Name}&lt;/p&gt;
  
                                     &lt;a onClick={this.onClick.bind(this, i)}&gt;
                                      &lt;img src="./img/speechbubble.png" className="textIcon" /&gt;
                                       {this.state.showChat[i] &amp;&amp; &lt; HomeScreen / &gt;}
                                  &lt;/a&gt;
                              &lt;/div&gt;
                          ))}
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
          )
      }
  
  }
  
  export default menuScreen;
  </code></pre>
  
  <p><strong>mainApp.js</strong></p>
  
  <pre><code>class MainApp extends React.Component{
      constructor(){
          super();
  
          const data = store.getState();
  
          this.state = {
              username: '',
              messages: data.messages,
              records: [],
              records: data.records,
              showChat:data.showChat
  
          };
  
  
  
      }
  
  
      render(){
      return (
        &lt;div&gt;
        &lt;MenuScreen /&gt;
        &lt;/div&gt; 
  
          );
      }
  }
  
  
  export default MainApp;
  </code></pre>
  
  <p><strong>HomeScreen.js</strong></p>
  
  <pre><code>class HomeScreen extends React.Component {
      constructor(){
          super();
  
          //Redux podaci za "hardcoding"
          const data = store.getState();
  
          this.state = {
              username: '',
              messages: data.messages,
              records: [],
              records: data.records,
              showChat:data.showChat
  
          };
  
  
  
  
  }
  
  
  
  
  
  
      render(){
      return (
          &lt;div&gt;
            &lt;h2&gt;HELLO&lt;/h2&gt;
            &lt;p&gt;Cras facilisis urna ornare ex volutpat, et
            convallis erat elementum. Ut aliquam, ipsum vitae
            gravida suscipit, metus dui bibendum est, eget rhoncus nibh
            metus nec massa. Maecenas hendrerit laoreet augue
            nec molestie. Cum sociis natoque penatibus et magnis
            dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
  
            &lt;p&gt;Duis a turpis sed lacus dapibus elementum sed eu lectus.&lt;/p&gt;
          &lt;/div&gt;
        );
      }
  
  }
  
  export default HomeScreen;
  </code></pre>