title: React.js history.push in a separate function?
body: <p>Can you help me with React.js history.push function?</p>
  
  <p>I have a icon which can be pressed. The onClick calls handleRemoveFavourite function which filters out the current item from localStrorage and sets the updated string to storage. This works fine.</p>
  
  <p>After the storage update is done the program should reroute the user to the root page /favourites. The reroute works well in the bottom example. But how to do this in the handleRemoveFavourites function? </p>
  
  <p>This is the code I would like to have</p>
  
  <pre><code>handleRemoveFavourite = () =&gt; {
      const { name } = this.props.workout;
      let savedStorage = localStorage.saved.split(",");
      let cleanedStorage = savedStorage.filter(function(e) {
        return e !== name;
      });
      localStorage.setItem("saved", cleanedStorage.toString());
      history.push("/favourites")
    };
  
    renderHeartIcon = () =&gt; {
      return (
        &lt;Route
          render={({ history }) =&gt; (
            &lt;Rating
              icon="heart"
              defaultRating={1}
              maxRating={1}
              onClick={this.handleRemoveFavourite}
            /&gt;
          )}
        /&gt;
      );
    };
  </code></pre>
  
  <p>The rerouting works fine with just this:</p>
  
  <pre><code>  renderHeartIcon = () =&gt; {
      return (
        &lt;Route
          render={({ history }) =&gt; (
            &lt;Rating
              key={1}
              icon="heart"
              defaultRating={1}
              maxRating={1}
              size="large"
              onClick={() =&gt; history.push("/favourites")}
            /&gt;
          )}
        /&gt;
      );
    };
  </code></pre>
  
  <p>The whole component looks like this:</p>
  
  <pre><code>import React from "react";
  import {
    Container,
    Grid,
    Icon,
    Label,
    Table,
    Header,
    Rating,
    Segment
  } from "semantic-ui-react";
  import { Link, Route } from "react-router-dom";
  
  export default class WorkoutComponent extends React.PureComponent {
    renderChallengeRow = workouts =&gt; {
      let { reps } = this.props.workout;
      reps = reps.split(",");
  
      return workouts.map((item, i) =&gt; {
        return (
          &lt;Table.Row key={item.id}&gt;
            &lt;Table.Cell width={9}&gt;{item.name}&lt;/Table.Cell&gt;
            &lt;Table.Cell width={7}&gt;{reps[i]}&lt;/Table.Cell&gt;
          &lt;/Table.Row&gt;
        );
      });
    };
  
    handleRemoveFavourite = () =&gt; {
      const { name } = this.props.workout;
      let savedStorage = localStorage.saved.split(",");
      let cleanedStorage = savedStorage.filter(function(e) {
        return e !== name;
      });
      localStorage.setItem("saved", cleanedStorage.toString());
      // history.push("/favourites");
    };
  
    renderHeartIcon = () =&gt; {
      return (
        &lt;Route
          render={({ history }) =&gt; (
            &lt;Rating
              key={1}
              icon="heart"
              defaultRating={1}
              maxRating={1}
              size="large"
              onClick={this.handleRemoveFavourite}
            /&gt;
          )}
        /&gt;
      );
    };
  
    render() {
      const { name, workouts } = this.props.workout;
      const url = `/savedworkout/${name}`;
      return (
        &lt;Grid.Column&gt;
          &lt;Segment color="teal"&gt;
            &lt;Link to={url}&gt;
              &lt;Header as="h2" to={url} content="The workout" textAlign="center" /&gt;
            &lt;/Link&gt;
            &lt;Table color="teal" inverted unstackable compact columns={2}&gt;
              &lt;Table.Body&gt;{this.renderChallengeRow(workouts)}&lt;/Table.Body&gt;
            &lt;/Table&gt;
            &lt;br /&gt;
            &lt;Container textAlign="center"&gt;
              &lt;Label attached="bottom"&gt;{this.renderHeartIcon()}&lt;/Label&gt;
            &lt;/Container&gt;
          &lt;/Segment&gt;
          &lt;Link to="/generate"&gt;
            &lt;Icon name="angle double left" circular inverted size="large" /&gt;
          &lt;/Link&gt;
        &lt;/Grid.Column&gt;
      );
    }
  }
  </code></pre>