title: How to force React Component to re-render?
body: <p>We are developing one POC in which, we are displaying the list of properties and we displayed respective property details in bootstrap modal popup on click of property title.</p>
  
  <p>We have following React components with the hierarchy:</p>
  
  <p>1 PropertyBox</p>
  
  <p>1.1 PropertyList</p>
  
  <p>1.1.1 PropertyInfo</p>
  
  <p>1.2 PropertyDetails in Bootstrap Modal popup HTML.</p>
  
  <p>The render method of PropertyBox contains following code.</p>
  
  <pre><code>render() {
  return (
  &lt;div id="property-box"&gt;
  &lt;PropertyListComponent&gt;
  &lt;div class="modal fade" id="myModal"&gt;
      &lt;div class="modal-dialog modal-lg modal-box-large"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body modal-max-height"&gt;
                  {propertyDetailsElement}
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;;
  </code></pre>
  
  <p>In property details component there are two bootstrap 4 tabs
  1. Overview (by default active)
  2. ContactUs</p>
  
  <p>The issue is, </p>
  
  <p>Consider I opened the property details popup by clicking the Property title, and go the Contact Us tab and closed the popup.</p>
  
  <p>After that I clicked on Next property title to see its property details. In that case, popup opens, respective property details are displayed but the Contact Us tab is displayed as active.</p>
  
  <p>So to solve the issue I tried to re-render the PropertyDetails component using method <b>"componentWillReceiveProps"</b></p>
  
  <pre><code>class PropertyDetail extends React.Component {
  
      constructor(props) {
          super(props)
          // in state we have stored the images as well as current index of image and translate value
          this.state = {
              property: this.props.data
          }
      }
  
      componentWillReceiveProps(nextProps) {
          this.setState({
              property: nextProps.data
          })
      }
      render() {return (&lt;HTML for Proeperty Details&gt;);
      }
  }
  
  </code></pre>
  
  <p>I have cross verified that whether the method "componentWillReceiveProps" is called every time when I click on PropertyTitle to open the Popup, and yes it is called every time. But issue is not solved.</p>
  
  <p>I am expecting that when Property details popup is opened every time the default active tab should be the Overview tab.</p>
  
  <p>Is there any solution ?</p>