title: Refresh React Component after changing data from modal dialog box
body: <p>I am building a small web application to learn React and exposed to an issue now. My task is to click on a particular city name and go to another component where that name of the city will be displayed. </p>
  
  <p>On that second component, I have one modal dialog box, where I can change the name of the city. While doing this, my component is still displaying the old city name rather the new one which I chose from the modal dialog box. When I refresh the page manually it does show that new name. I am very new to react and getting confused in such stuff. What should I do to render an updated city name? </p>
  
  <p>SecondTable Component:(Where I want to display the name of the city)</p>
  
  <pre><code>class SecondTable extends Component {
  
  
  state = {
      data: [(visible: false), (city: null)]
    };
  
     componentDidMount() {
      console.log(this.props);
      let id = this.props.match.params.city_id;
       axios
        .get("http://100.124.69.3:8080/api/v1/cities/" + id)
        .then(res =&gt; {
          this.setState({ city: res.data.name });
          console.log(res);
        });
      console.log(this.state.city);
    }
  
    render() {
      return &lt;div className="align1"&gt;{this.state.city}&lt;/div&gt;;
    }
  }
  </code></pre>
  
  <p>Component for Modal dialog box from where i chose new city:</p>
  
  <pre><code>class FacilityModal extends Component {
  
  
  state = {
      cities:[],
    }
  
    componentDidMount()
    {
      console.log(this.props.visa)
      await axios.get('http://100.124.68.1:8080/api/v1/cities' ).then(res =&gt; {
        this.setState({cities:res.data})
  
      });
  
    }
  
  
  
  render() {
         let posts = (
           &lt;div &gt;All Facilities (NCAL)
                 &lt;div className = 'Modal'&gt;
                     {this.state.cities.map(city =&gt;
                         {
                           return &lt;Link to = {'/'+city.id} key = {city.id} onClick = {this.props.onCancel}&gt; {city.name} &lt;/Link&gt;
                         })}
                 &lt;/div&gt;
                 &lt;/div&gt;
  
            );
  
      return (
  
        &lt;div&gt;
          &lt;Modal
            title="Change Facility"
            visible={this.props.visible}
             onCancel={this.props.onCancel}
            footer={null}
          &gt;
          &lt;div&gt;{posts}&lt;/div&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>My Home Component for the initial list of cities:</p>
  
  <pre><code>class Home extends Component{
  
  
   state = {
      cities:[],
      name:''
    }
  
     componentDidMount()
    {
  
       axios.get('http://100.124.68.1:8080/api/v1/cities').then(res =&gt; {
        this.setState({cities:res.data})
  
      });
  
    }
  
    render(){
      let postList = this.state.cities.map(city =&gt;
      {
        return (
  
            &lt;div key = {city.id}&gt;
            &lt;p&gt;
          &lt;Link to = {'/'+city.id}&gt;{city.name}&lt;/Link&gt;&lt;/p&gt;
          &lt;/div&gt;
        )
      })
      return(
  
  
          &lt;div className = 'align'&gt;All Facilities (NCAL)
  &lt;div class="hr-sect"&gt;OR&lt;/div&gt;
     &lt;div className = 'Modal1'&gt;
              {postList}
          &lt;/div&gt;
        &lt;/div&gt;
  
  
      )
    }
  </code></pre>
  
  <p>Routes for component:</p>
  
  <pre><code>render() {
  return (
  
  
  &lt;div &gt;
        &lt;BrowserRouter&gt;
          &lt;div className="App"&gt;
            &lt;Header /&gt;
              &lt;Switch&gt;
                  &lt;Route exact path='/' component={Home} /&gt;
                  &lt;Route path='/users' component={TableData} /&gt;
                  &lt;Route path='/:city_id' component={SecondTable} /&gt;
              &lt;/Switch&gt;
          &lt;/div&gt;
    &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p></p>