title: How to link on click function to another component in React app?
body: <p>I have a landing page that contains a logo. I'm trying to get this logo to trigger a change of of state value. The purpose of this is to change from the landing page to the home page on click. I have set it up so that the landing page clear in an determined time, but I want to do this on click. This is my <code>splash.js</code> file that contains the on click function as well as the logo and landing page:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Woods from './woods.jpeg';
  import Logo1 from './whitestar.png';
  
  
  export default class Splash extends Component {
      constructor() {
          super();
              this.toggleShowHome = this.toggleShowHome.bind(this);
      }
  
      toggleShowHome(property){
          this.setState((prevState)=&gt;({[property]:!prevState[property]}))
       }
  
      render() {
          return(
              &lt;div id='Splashwrapper'&gt;
                  &lt;img src={Woods}&gt;&lt;/img&gt;
                  &lt;img id='logoc' src={Logo1} onClick={()=&gt;this.toggleShowHome('showSquareOne')}&gt;&lt;/img&gt;
              &lt;/div&gt;    
          );  
      }
  }
  </code></pre>
  
  <p>I want the on click function to change the value of <code>splash</code> to false in my <code>App.js</code> file:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Splash from './splash';
  
  import Menu from 'components/Global/Menu';
  
  export default class About extends Component {
      constructor(){
          super();
          this.state = {
              splash: true
          }
  
      }
  
      componentDidMount() {
          setTimeout (() =&gt; {
          this.setState({splash: false});
          }, 10000);
      }
  
      render() {
          if (this.state.splash) {
              return &lt;Splash /&gt;
          }
  
          const { children } = this.props; // eslint-disable-line
  
          return (
              &lt;div className='About'&gt;
                  &lt;Menu /&gt;
                  { children }
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>How can I link the on click function to the <code>App.js</code> file and change the value of <code>splash</code>?</p>