CODEWITHSUNDEEP
javascriptreactjsbootstrap-modal
pankaj
pankaj

Reputation: 207

How to force React Component to re-render?

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.

We have following React components with the hierarchy:

1 PropertyBox

1.1 PropertyList

1.1.1 PropertyInfo

1.2 PropertyDetails in Bootstrap Modal popup HTML.

The render method of PropertyBox contains following code.

render() {
return (
<div id="property-box">
<PropertyListComponent>
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg modal-box-large">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body modal-max-height">
                {propertyDetailsElement}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
</div>;

In property details component there are two bootstrap 4 tabs 1. Overview (by default active) 2. ContactUs

The issue is,

Consider I opened the property details popup by clicking the Property title, and go the Contact Us tab and closed the popup.

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.

So to solve the issue I tried to re-render the PropertyDetails component using method "componentWillReceiveProps"

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 (<HTML for Proeperty Details>);
    }
}

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.

I am expecting that when Property details popup is opened every time the default active tab should be the Overview tab.

Is there any solution ?

Upvotes: 0

Views: 8150

Answers (1)

Junaid aziz
Junaid aziz

Reputation: 363

There are two ways you can achieve this.

1) when you change the property add a default function called

componentWillUnMount it will remove the component from dom and it will reset its properties

or you can use

In your component, you can call this.forceUpdate() method to force a rerender.

2) The second one is passing a key to the component whenever you change the property it will update the key passing to component so every time, so you open up a property new key, will be passed and the new component instance will be opened and you will not face this problem again

Upvotes: 5

Related Questions