title: How would I my component work inside another component without repeating code?
body: <p>How would I make my component work inside another component without repeating code?</p>
  
  <p>In other words, inside <code>NextPage.js</code> file, the <code>&lt;LogoutButton/&gt;</code> component won't carry out its function?  I want the <code>&lt;LogoutButton/&gt;</code> to carry out the exact same function as it does inside the <code>&lt;Home/&gt;</code> component.  </p>
  
  <p>Is there a way to do this without making <code>NextPage.js</code> a class based component and repeating the same logic inside <code>NextPage.js</code> component?  </p>
  
  <p>Here's the <code>Home.js</code> file:</p>
  
  <pre><code>import React, {Component} from 'react';
  import fire from '../../config/Fire';
  import classes from './Home.css';
  import Aux from '../../hoc/Aux';
  import NextPage from '../../components/nextpage/NextPage';
  import LogoutButton from '../../UI/buttons/LogoutButton';
  
  class Home extends Component {
  
      state = {
          flag: false
      }
  
      logout() {
          fire.auth().signOut();
      }
  
      goToNextPage() {
          this.setState({flag: true});
      }
  
      render() {
          const flag = this.state.flag;
  
          if(flag) {
              return &lt;NextPage/&gt;;
          }
  
          return (
              &lt;Aux&gt;
                  &lt;button
                  type="button"
                  className="btn btn-outline-primary btn-lg btn-block"
                  onClick={this.goToNextPage.bind(this)}&gt;some button
              &lt;/button&gt;
  
                  &lt;LogoutButton clicked={this.logout.bind(this)}/&gt;
                  &lt;NextPage/&gt;
              &lt;/Aux&gt;
          );
      }
  }
  
  export default Home;
  </code></pre>
  
  <p>Here's the <code>NextPage.js</code> file:</p>
  
  <pre><code>import React from 'react';
  import Aux from '../../hoc/Aux';
  import LogoutButton from '../../UI/buttons/LogoutButton';
  
  const nextPage = () =&gt; {
      return(
          &lt;Aux&gt;
              &lt;LogoutButton/&gt;
          &lt;/Aux&gt;
      );
  }
  
  export default nextPage;
  </code></pre>
  
  <p>Here's the <code>LogoutButton.js</code> file:</p>
  
  <pre><code>import React from 'react';
  import classes from '../../UI/buttons/LogoutButton.css';
  import Aux from '../../hoc/Aux';
  
  const logoutButton = (props) =&gt; (
      &lt;Aux&gt;
          &lt;button
              className={classes.LogoutButton}
              onClick={props.clicked}&gt;Logout
          &lt;/button&gt;
      &lt;/Aux&gt;
  );
  
  export default logoutButton;
  </code></pre>