title: How to redirect to parent component
body: <p>Hi I'm trying to make a simple CRUD example using React.Js and typescript...</p>
  
  <p>I have the following component hierarchy:</p>
  
  <pre><code>-FetchNaselje
  --Modal
  ---AddNaselje
  </code></pre>
  
  <p>AddNaselje is a child of Modal and Modal is child of FetchNaselje, I'm trying to re-render or forcefully update FetchNaselje everytime somebody submits/saves <strong>form</strong> from AddNaselje but I'm having hard time doing that.</p>
  
  <p>I tired passing history of parent and calling it in child like: this.props.history.push("/fetchnaselje"); but nothing happens</p>
  
  <p>this is my routes.tsx file:</p>
  
  <pre><code>import * as React from 'react';
  import { Route } from 'react-router-dom';
  import { Layout } from './components/Layout';
  import { Home } from './components/Home';
  
  import { FetchNaselje } from './components/FetchNaselje';
  import { AddNaselje } from './components/AddNaselje'; 
  
  export const routes = &lt;Layout&gt;
      &lt;Route exact path='/' component={Home} /&gt;
      &lt;Route path='/fetchnaselje' component={FetchNaselje} /&gt;
      &lt;Route path='/addnaselje(/:nasid)' component={AddNaselje} /&gt;
      &lt;Route path='/naselje/edit(/:nasid)' component={AddNaselje} /&gt;
  &lt;/Layout&gt;;
  </code></pre>
  
  <p>This is my parent component code:</p>
  
  <pre><code>import * as React from 'react';
  import { RouteComponentProps } from 'react-router';
  import { Link, NavLink } from 'react-router-dom';
  import { AddNaselje } from './AddNaselje';
  import { Modal } from './Modal/Modal';
  
  interface FetchNaseljeDataState {
      nasList: NaseljeData[];
      loading: boolean;
      showModal: boolean
      nas_id: number;
  }
  
  export class FetchNaselje extends React.Component&lt;RouteComponentProps&lt;{}&gt;, FetchNaseljeDataState&gt; {
      constructor() {
          super();
          this.state = { nasList: [], loading: true, showModal: false, nas_id: -1 };
          fetch('api/Naselje/Index')
              .then(response =&gt; response.json() as Promise&lt;NaseljeData[]&gt;)
              .then(data =&gt; {
                  this.setState({ nasList: data, loading: false });
              });
          // This binding is necessary to make "this" work in the callback  
          this.handleDelete = this.handleDelete.bind(this);
          this.handleEdit = this.handleEdit.bind(this);
      }
  
      public render() {
          let contents = this.state.loading
              ? &lt;p&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
              : this.renderNaseljeTable(this.state.nasList);
          return &lt;div&gt;
              &lt;h1&gt;Naselje Data&lt;/h1&gt;
              &lt;div&gt;This component demonstrates fetching Naselje data from the server.&lt;/div&gt;
              &lt;div&gt;
                  &lt;Link to="/addnaselje"&gt;Create New&lt;/Link&gt;&lt;br /&gt;&lt;br /&gt;
                  &lt;button type="button" onClick={this.showModal} className="btn"&gt;
                      Show Modal
                  &lt;/button&gt;
                  &lt;Modal
                      show={this.state.showModal}&gt;
                      &lt;AddNaselje history={this.props.history} parent={this} /&gt;
                  &lt;/Modal&gt;
              &lt;/div&gt;
              {contents}
          &lt;/div&gt;;
      }
  
      showModal = () =&gt; {
          this.setState({
              ... this.state,
              showModal: !this.state.showModal
          });
          this.forceUpdate();
      };
  
      // Handle Delete request for an naselje  
      private handleDelete(id: number) {
          if (!confirm("Do you want to delete naselje with Id: " + id))
              return;
          else {
              fetch('api/Naselje/Delete/' + id, {
                  method: 'delete'
              }).then(data =&gt; {
                  this.setState(
                      {
                          nasList: this.state.nasList.filter((rec) =&gt; {
                              return (rec.idnaselje != id);
                          })
                      });
              });
          }
      }
      private handleEdit(id: number) {
          //this.props.history.push("/naselje/edit/" + id);
      }
  
      // Returns the HTML table to the render() method.  
      private renderNaseljeTable(naseljeList: NaseljeData[]) {
          return &lt;table className='table'&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;&lt;/th&gt;
                      &lt;th&gt;ID Naselje&lt;/th&gt;
                      &lt;th&gt;Naziv&lt;/th&gt;
                      &lt;th&gt;Postanski Broj&lt;/th&gt;
                      &lt;th&gt;Drzava&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  {naseljeList.map(nas =&gt;
                      &lt;tr key={nas.idnaselje}&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;{nas.idnaselje}&lt;/td&gt;
                          &lt;td&gt;{nas.naziv}&lt;/td&gt;
                          &lt;td&gt;{nas.postanskiBroj}&lt;/td&gt;
                          &lt;td&gt;{nas.drzava &amp;&amp; nas.drzava.naziv}&lt;/td&gt;
                          &lt;td&gt;
                              &lt;a className="action" onClick={(id) =&gt; this.handleEdit(nas.idnaselje)}&gt;Edit&lt;/a&gt;  |
                              &lt;a className="action" onClick={(id) =&gt; this.handleDelete(nas.idnaselje)}&gt;Delete&lt;/a&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  )}
              &lt;/tbody&gt;
          &lt;/table&gt;;
      }
  }
  export class NaseljeData {
      idnaselje: number = 0;
      naziv: string = "";
      postanskiBroj: string = "";
      drzava: DrzavaData = { iddrzava: 0, naziv: ""};
      drzavaid: number = 0;
  }
  
  export class DrzavaData {
      iddrzava: number = 0;
      naziv: string = "";
  }
  </code></pre>
  
  <p>My modal component is like a wrapper with styles set for showing modal window:</p>
  
  <pre><code>import * as React from 'react';
  const style = require('./style.css');
  
  interface ModaleDataState {
      show: boolean;
  }
  
  export class Modal extends React.Component&lt;any, ModaleDataState&gt; {
      render() {
  
          if (!this.props.show) {
              return null;
          }
  
          return &lt;div className="modal-background"&gt;
              &lt;div className="modal-main"&gt;
                  {this.props.children}
              &lt;/div&gt;
         &lt;/div&gt;
      }
  }
  </code></pre>
  
  <p>And finally the child component:</p>
  
  <pre><code>import * as React from 'react';
  import { RouteComponentProps } from 'react-router';
  import { Link, NavLink } from 'react-router-dom';
  import { NaseljeData } from './FetchNaselje';
  import { DrzavaData } from './FetchNaselje';
  
  interface AddNaseljeDataState {
      title: string;
      loading: boolean;
      drzavaList: Array&lt;any&gt;;
      nasData: NaseljeData;
      drzavaId: number;
  }
  
  export class AddNaselje extends React.Component&lt;any, AddNaseljeDataState&gt; {
      constructor(props) {
          super(props);
  
          this.state = { title: "", loading: true, drzavaList: [], nasData: new NaseljeData, drzavaId: -1 };
          fetch('api/Naselje/GetDrzavaList')
              .then(response =&gt; response.json() as Promise&lt;Array&lt;any&gt;&gt;)
              .then(data =&gt; {
                  this.setState({ drzavaList: data });
              });
  
          var nasid = -1;
          if (this.props.match) {
              nasid = this.props.match.params["nasid"];
          }
  
          // This will set state for Edit naselje  
          if (nasid &gt; 0) {
              fetch('api/Naselje/Details/' + nasid)
                  .then(response =&gt; response.json() as Promise&lt;NaseljeData&gt;)
                  .then(data =&gt; {
                      this.setState({ title: "Edit", loading: false, nasData: data });
                  });
          }
          // This will set state for Add naselje  
          else {
              this.state = { title: "Create", loading: false, drzavaList: [], nasData: new NaseljeData, drzavaId: -1 };
          }
          // This binding is necessary to make "this" work in the callback  
          this.handleSave = this.handleSave.bind(this);
          this.handleCancel = this.handleCancel.bind(this);
      }
  
      public render() {
          let contents = this.state.loading
              ? &lt;p&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
              : this.renderCreateForm(this.state.drzavaList);
          return &lt;div&gt;
              &lt;h1&gt;{this.state.title}&lt;/h1&gt;
              &lt;h3&gt;Naselje&lt;/h3&gt;
              &lt;hr /&gt;
              {contents}
          &lt;/div&gt;;
      }
  
      // This will handle the submit form event.  
      private handleSave(event) {
  
          event.preventDefault();
          const data = new FormData(event.target);
          // PUT request for Edit naselje.  
          if (this.state.nasData.idnaselje) {
              fetch('api/Naselje/Edit', {
                  method: 'PUT',
                  body: data,
              }).then((response) =&gt; response.json())
                  .then((responseJson) =&gt; {
                      this.props.history.push("/fetchnaselje");
                  })
          }
          // POST request for Add naselje.  
          else {
              fetch('api/Naselje/Create', {
                  method: 'POST',
                  body: data,
              }).then((response) =&gt; response.json())
                  .then((responseJson) =&gt; {
                      this.props.history.push("/fetchnaselje");
                  })
          }
          this.props.parent.showModal();
          window.location.reload()
      }
  
      // This will handle Cancel button click event.  
      private handleCancel(e) {
          e.preventDefault();
          //this.props.parent.showModal();
          this.props.history.push("/fetchnaselje");
          //this.props.parent.forceUpdate();
      }
  
      // Returns the HTML Form to the render() method.  
      private renderCreateForm(drzavaList: Array&lt;any&gt;) {
          return (
              &lt;form onSubmit={this.handleSave} &gt;
                  &lt;div className="form-group row" &gt;
                      &lt;input type="hidden" name="idnaselje" value={this.state.nasData.idnaselje} /&gt;
                  &lt;/div&gt;
                  &lt; div className="form-group row" &gt;
                      &lt;label className=" control-label col-md-12" htmlFor="Naziv"&gt;Naziv&lt;/label&gt;
                      &lt;div className="col-md-4"&gt;
                          &lt;input className="form-control" type="text" name="naziv" defaultValue={this.state.nasData.naziv} required /&gt;
                      &lt;/div&gt;
                  &lt;/div &gt;
                  &lt;div className="form-group row"&gt;
                      &lt;label className="control-label col-md-12" htmlFor="PostanskiBroj" &gt;Postanski broj&lt;/label&gt;
                      &lt;div className="col-md-4"&gt;
                          &lt;input className="form-control" name="PostanskiBroj" defaultValue={this.state.nasData.postanskiBroj} required /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="form-group row"&gt;
                      &lt;label className="control-label col-md-12" htmlFor="Drzava"&gt;Država&lt;/label&gt;
                      &lt;div className="col-md-4"&gt;
                          &lt;select className="form-control" data-val="true" name="drzavaid" defaultValue={this.state.nasData.drzava ? this.state.nasData.drzava.naziv : ""} required&gt;
                              &lt;option value=""&gt;-- Odaberite Državu --&lt;/option&gt;
                              {drzavaList.map(drzava =&gt;
                                  &lt;option key={drzava.iddrzava} value={drzava.iddrzava}&gt;{drzava.naziv}&lt;/option&gt;
                              )}
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div &gt;
                  &lt;div className="form-group"&gt;
                      &lt;button type="submit" className="btn btn-default"&gt;Save&lt;/button&gt;&amp;nbsp;
                      &lt;button className="btn" onClick={this.handleCancel}&gt;Cancel&lt;/button&gt;
                  &lt;/div &gt;
              &lt;/form &gt;
          )
      }
  }
  </code></pre>
  
  <p>This props history push doesn't throw any error but it doesn't re render my parent component.</p>
  
  <p>I'm not sure what's the best approach here... please take in consideration that I don't have too much experience in react so I would appreciate if your try to explain the best approach in complete manner not just a short answer... thanks!</p>