title: Onclick history.push in child component in react. - Warning: Cannot update during an existing state transition (such as within `render`)
body: <p>I have a Child component that is rendered dynamically inside a  Parent component. <strong>I have a onClick redirect</strong> function in it. Whenever <strong>I click on that</strong>, I get a error message as show below. Then <strong>I click again, page redirects to destination</strong></p>
  
  <p><a href="https://i.stack.imgur.com/UNvPV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UNvPV.png" alt="enter image description here"></a></p>
  
  <p><strong>child component</strong> </p>
  
  <pre><code>const CategoryItem = ({ img, name, categoryLink, match,history }) =&gt; (
        &lt;div className="col-3 col-sm-3 col-md-2 col-lg-2 cat-item" onClick={(event)=&gt;{
          history.push(`${match.url}/${categoryLink}`)
        }}&gt;
          &lt;img src={img} className="format-image" /&gt;
          &lt;h5 className="device-title"&gt;{name}&lt;/h5&gt;
        &lt;/div&gt;
  );
  
  export default withRouter(CategoryItem);
  </code></pre>
  
  <p><strong>Parent Component</strong></p>
  
  <pre><code>const Category = () =&gt; {
    return (
      &lt;section className="app-section"&gt;
        &lt;div className="app-container"&gt;
          &lt;h2&gt;Select Category&lt;/h2&gt;
          &lt;div className="app-row justify-content-center"&gt;
            {listOfCategories.map(({ image, name, link }) =&gt; {
              return (
                &lt;ChildItem key={name} img={image} name={name} categoryLink={link}  /&gt;
              );
            })}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    );
  };
  export default Category;
  </code></pre>
  
  <p>I have solved the cannot Update error by making child component a class component. </p>
  
  <p><strong>My router components looks like this.</strong></p>
  
  <pre><code>class Router extends Component {
    render() {
      let routes = (
          &lt;Switch&gt;
            &lt;Route path={`${BASE_URL}`} exact component={HomePage} /&gt;
            &lt;Route path={`${BASE_URL}/:categorySlug`} exact component={PlanPage} /&gt;
            &lt;Route path={`${BASE_URL}/success/:sr_id`}  exact component={SrCreated}/&gt;
            &lt;Route path={`${BASE_URL}/:categorySlug/:cart_id`} exact component={CartPage} /&gt;
            &lt;Redirect to={`${BASE_URL}`}  /&gt;
          &lt;/Switch&gt;
      );
  
      return (
        &lt;Layout&gt;
          {routes}
        &lt;/Layout&gt;
      );
    }
  }
  </code></pre>