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 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
– Keith, Commented Nov 8, 2018 at 10:40

Tholle · Accepted Answer · 2018-11-08 10:49:10Z

10

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>

answered Nov 8, 2018 at 10:49

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhinav Mehrotra Over a year ago

Thanks.. This really saved me a lot of manual labor that i thought i might need to do. :)

Yury · Accepted Answer · 2019-03-28 15:55:07Z

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, 2019 at 15:55

Yury

212 bronze badges

Comments

Saad · Accepted Answer · 2020-03-26 22:25:17Z

-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, 2020 at 22:25

Saad

1,0872 gold badges19 silver badges33 bronze badges

answered Mar 26, 2020 at 16:49

Madhubala Jayakumaran

491 silver badge7 bronze badges

1 Comment

iron9 Over a year ago

This doesn't reload only the component, but the entire page.

Collectives™ on Stack Overflow

ReactJs : How to reload a component onClick

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related