javascript - 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 ponents 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 ponent 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 ponent using method "ponentWillReceiveProps"

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
        }
    }

    ponentWillReceiveProps(nextProps) {
        this.setState({
            property: nextProps.data
        })
    }
    render() {return (<HTML for Proeperty Details>);
    }
}

I have cross verified that whether the method "ponentWillReceiveProps" 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 ?

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 ponents 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 ponent 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 ponent using method "ponentWillReceiveProps"

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
        }
    }

    ponentWillReceiveProps(nextProps) {
        this.setState({
            property: nextProps.data
        })
    }
    render() {return (<HTML for Proeperty Details>);
    }
}

I have cross verified that whether the method "ponentWillReceiveProps" 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 ?

Share Improve this question asked May 14, 2019 at 9:32 pankaj 2078 silver badges19 bronze badges

can you create a codepen or gitrepo with the code – Sumanth Madishetty Commented May 14, 2019 at 9:35
why you use ponentWillReceiveProps and not shouldComponentUpdate(nextProps, nextState)? – ProblemsEverywhere Commented May 14, 2019 at 9:58
Hi both of you, thank you for your suggestions, I solved the issue by passing property Id as "Key" property to PropertyDetails Component as suggested by @Juniadaziz. – pankaj Commented May 14, 2019 at 10:07

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

There are two ways you can achieve this.

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

ponentWillUnMount it will remove the ponent from dom and it will reset its properties

or you can use

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to force React Component to re-render? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)