How to reload current page in ReactJS

Question

How to reload current page in ReactJS  in case of javascript we can wrote window location reload    How to do the same in reactjs  I m able to add new data by UI  But without refresh I m not able to see the list  I want whenever I m adding some data that time itself   onAddBucket         let self   this      let getToken   localStorage getItem  myToken        var apiBaseUrl              let input            name     this state fields  bucket name             axios defaults headers common  Authorization     getToken      axios post apiBaseUrl       input       then function  response           if response data status    200         let result    self state buckets concat response data buckets         else          alert response data message                       catch function  error          console log error

User · Accepted Answer

Since React eventually boils down to plain old JavaScript, you can really place it anywhere! For instance, you could place it on a componentDidMount() in a React class.

For you edit, you may want to try something like this:

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.onAddBucket = this.onAddBucket.bind(this);
  }
  componentWillMount() {
    this.setState({
      buckets: {},
    })
  }
  componentDidMount() {
    this.onAddBucket();
  }
  onAddBucket() {
    let self = this;
    let getToken = localStorage.getItem('myToken');
    var apiBaseUrl = "...";
    let input = {
      "name" :  this.state.fields["bucket_name"]
    }
    axios.defaults.headers.common['Authorization'] = getToken;
    axios.post(apiBaseUrl+'...',input)
    .then(function (response) {
      if (response.data.status == 200) {
        this.setState({
          buckets: this.state.buckets.concat(response.data.buckets),
        });
      } else {
        alert(response.data.message);
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  render() {
    return (
      {this.state.bucket}
    );
  }
}

User · Answer

This is my code  This works for me componentDidMount            axios get  http   localhost 5000 supplier   then              response   gt                    console log response                  this setState  suppliers response data data                                    catch error   gt                console log error                             componentDidUpdate            this componentDidMount        window location reload     I think this thing is not good for react js

User · Answer

You can use window location reload    in your componentDidMount   lifecycle method  If you are using react-router  it has a refresh method to do that   Edit  If you want to do that after a data update  you might be looking to a re-render not a reload and you can do that by using this setState    Here is a basic example of it to fire a re-render after data is fetched   import React from  react   const ROOT URL    https   jsonplaceholder typicode com   const url      ROOT URL  users    class MyComponent extends React Component       state             users  null           componentDidMount             fetch url               then response   gt  response json                 then users   gt  this setState  users  users               render             const  users    this state          if  users                return                    lt ul gt                       users map user   gt   lt li gt  user name  lt  li gt                     lt  ul gt                          else               return   lt h1 gt Loading     lt  h1 gt                      export default MyComponent

User · Answer

use this might help   window location reload

[javascript] How to reload current page in ReactJS?

Examples related to javascript

Examples related to reactjs