title: How to prevent state change in React after page refresh/view change?
body: <p>My onClick-event handler adds/removes an id to a database field and changes the button color according to the toggle state true/false. 
  While the data update works correctly, the color state resets upon a page refresh/view change.
  I guess the state needs to be passed on (the relationship is child to parent in this case) with a callback function but I am not sure.  </p>
  
  <p>I thought it would be necessary to 'preserve' the current state in LocalStorage but this did not solve the issue. While the LocalStorage values 'true' and 'false' remained their state (as displayed in the console), the color of the button still reset when refreshing the page.  </p>
  
  <p>I attached the code sections that may be of importance to assess the issue:</p>
  
  <pre><code>// initialization of toggle state
  let toggleClick = false;
  
  ...
  
   this.state = {
        fav: props.favorite
      };
      this.toggleClass = this.toggleClass.bind(this);
    }
  
  ...
  
  componentDidUpdate(prevProps) {
      if (this.props.favorite !== prevProps.favorite) {
        this.setState({
          fav: this.props.favorite
        });
      }
    }
  
    toggleClass() {
      toggleClick = true;
      if (!this.state.fav) {
        this.addId(this.props.movie._id);
      } else {
        this.removeId();
      }
    }
  
  ...
  
  &lt;span
    onClick={() =&gt; this.toggleClass()}
    className={this.state.fav ? "favme active" : "favme"}
  &gt;&amp;#x2605;&lt;/span&gt;
  </code></pre>