title: How do I made a component reload/refresh from a seperate component
body: <p>I want to update a header component when a separate component adds an item to the shopping cart. I find lots of examples of doing a refresh on a button-click but nothing on calling from outside the component.</p>
  <p>I have modified the header component so if I click the refresh button on my browser, the whole page reloads correctly. But now I need to have something in code to do it:</p>
  <pre><code>import React from 'react';
  import { NavLink, withRouter } from 'react-router-dom';
  import Config from 'config';
  import { Helmet } from &quot;react-helmet&quot;;
  import { Jumbotron, Container } from 'reactstrap';
  import { GetCount } from './ShoppingCart/CartHandler.js'
  
  export function reload() {
      this.forceUpdate();
  }
  
  class LogoHeader extends React.Component {
      constructor({ history }) {
          super({ history });
          this.state = {
              name: 'React',
              apiData: [],
              canAdmin: false,
              history: history,
          };
      }    
  
      canAdmin() {
          console.log('Can Admin: ' + this.state.canAdmin)
          return this.state.canAdmin;
      }
  
      componentDidMount() {
          console.log('app mounted');        
          
          const tokenString = sessionStorage.getItem(&quot;token&quot;);
          const token = JSON.parse(tokenString);
          this.setState({ canAdmin: token.canAdmin})
  
          fetch(Config.apiUrl + &quot;/api/Header/GetLogo&quot;)
              .then(data =&gt; data.json())
              .then(data =&gt; this.setState({ image: &quot;data:image/png;base64,&quot; + data.image }, () =&gt; console.log(data)));
  
          fetch(Config.apiUrl + &quot;/api/Header&quot;)
              .then(data =&gt; data.json())
              .then(data =&gt; {
                  sessionStorage.removeItem(&quot;header&quot;);
                  sessionStorage.setItem(&quot;header&quot;, JSON.stringify(data));
                  this.setState({ header: data }, () =&gt; console.log(data))
              });
      }
  
  
      render() {
          const logoImage = this.state.image;
          const myHeader = this.state.header;
          const count = GetCount();
          
          return (
              &lt;div&gt;
                  &lt;Helmet&gt;
                      &lt;title&gt;{myHeader?.title}&lt;/title&gt;
                  &lt;/Helmet&gt;
                  &lt;Jumbotron fluid&gt;
                      &lt;Container fluid id=&quot;headerContainer&quot;&gt;
                          &lt;img src={logoImage} id=&quot;logoImg&quot; /&gt;
                          &lt;input id=&quot;searchBar&quot; type=&quot;text&quot; placeholder=&quot;Search&quot;&gt;&lt;/input&gt;
                          {console.log('Location: ' + this.state.history.location.pathname)}
                          &lt;NavLink to='/portal' isActive={() =&gt; this.canAdmin()}&gt;
                              &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;30&quot; height=&quot;30&quot; fill=&quot;currentColor&quot; className=&quot;bi bi-person&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                                  &lt;path d=&quot;M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z&quot; /&gt;                            
                              &lt;/svg&gt;
                          &lt;/NavLink&gt;
                          &lt;span&gt;
                              {count === 0 ? null : '(' + count + ')'}
                              &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;25&quot; height=&quot;25&quot; fill=&quot;currentColor&quot; className=&quot;bi bi-cart&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                                  &lt;path d=&quot;M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z&quot; /&gt;
                              &lt;/svg&gt;
                          &lt;/span&gt;
                      &lt;/Container&gt;
                  &lt;/Jumbotron&gt;
              &lt;/div&gt;
          );
      }
  
  }
  export default withRouter(LogoHeader);
  </code></pre>
  <p>I just want to add a count of items to show up besides the shopping cart icon.</p>
  <p>As you can see, I tried adding a reload function. But I am getting an error that 'this' is undefined when I call it. I am unsure if this would ever even work. I only actually need the <code>&lt;span&gt;</code> part to refresh but I can't figure that out either. Any tips or help will definitely be appreciated.</p>