ReactJs : How to reload a component onClick

Question

I am new to React and am still learning it. I have a component Requirements which I would like to reload everytime getDocFinancialInfo () is called by clicking on the event. The issue is that it loads the correct information the first time but does not refreshes it on subsequent clicks. Any help or suggestion would be most welcome.

    import React, { Component } from 'react';
    import './UploadDocument.css'
    import spinner from './spinner.gif'
    import verified from './verified.png';
    import notverified from './not-verified.png';
    import Requirements from './Requirement.js'


    class UploadDocument extends Component{

      constructor(props) {
        super(props);
        this.state = {
          application: [],
          document:[],
          id: null,
          files: [],
          docFinacialInfo: [],
          uploaded: null,
          fileInfo: []
        }
      }


      componentDidMount() {
        ......
      }




      getDocFinancialInfo = async(docId) => {
          sessionStorage.setItem('docId',docId);

          var req = document.getElementById('requirements');
          req.style.display = "block";
      }




      render(){
        ......

          if(notVerifiedStatus > 0){
              docVerificationStatus[index] = <td className="red"><img src={notverified} alt="Not Verified"/><label onClick={()=>this.getDocFinancialInfo(docId)}>Not Verified{docId}</label></td>;
          }else{
              docVerificationStatus[index] = <td className="green"><img src={verified} alt="Verified" /><label>Verified</label></td>;
          }
          console.log("Not Verified >>>"+notVerifiedStatus);
        });

        ......

        return(
          <div>

                .........

                    <div id="requirements">
                      <div id="requirements-content">
                        <span className="close" onClick={()=>this.closeRequirements()}>&times;</span>
                        <Requirements />
                      </div>
                    </div>

                .........
          </div>
        )
      }
    }

    export default UploadDocument

React renders it's view based on state & props,. state is something that changes over time, so what your doing is changing something over time, so logically you should be calling `setState`. If state cannot be implied, then there is also `forceUpdate` https://reactjs.org/docs/react-component.html#forceupdate But if your not using setState, you might want to think out the logic a bit more. One area where you don't use setState, is when implementing `Single Source Of Truth`, but for that you would be using something like Redux. — Keith, Nov 08 '18 at 10:40

score 9 · Accepted Answer · answered Nov 08 '18 at 10:49

You can change the key prop given to a component in order to unmount it and mount a new one.

You could keep a random value in your state that you randomise again when getDocFinancialInfo is called and use this value as the key for Requirements.

Example

class Requirements extends React.Component {
  state = { count: 0 };

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(({ count }) => ({ count: count + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div> {this.state.count}</div>;
  }
}

class UploadDocument extends React.Component {
  state = {
    requirementKey: Math.random()
  };

  getDocFinancialInfo = docId => {
    this.setState({ requirementKey: Math.random() });
  };

  render() {
    return (
      <div>
        <Requirements key={this.state.requirementKey} />
        <button onClick={this.getDocFinancialInfo}> Reload </button>
      </div>
    );
  }
}

ReactDOM.render(<UploadDocument />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Thanks.. This really saved me a lot of manual labor that i thought i might need to do. :) — Abhinav Mehrotra, Nov 08 '18 at 11:29

score 2 · Answer 2 · answered Mar 28 '19 at 15:55

2

As mentioned above - change key value is a great idea But instead of using Math.random I prefer using new Date() value to be sure that key is changed anyway :)

answered Mar 28 '19 at 15:55

Yury

21
2

score -2 · Answer 3 · edited Mar 26 '20 at 22:25

-2

You can use vanilla Javascript to call reload method window.location.reload(false)

<button onClick={() => window.location.reload(false)}>Click to reload!</button>

edited Mar 26 '20 at 22:25

Saad

1,047
2
19
32

answered Mar 26 '20 at 16:49

Madhubala Jayakumaran

37
1
6

This doesn't reload only the component, but the entire page. – iron9 Jan 04 '23 at 13:14

ReactJs : How to reload a component onClick

3 Answers3

Linked