0

Rerendering same component inside one function in ReactJs. I'm adding comment and now after that I want to rerender the same component. Can anyone help?

commentPost() {...
    axios.defaults.headers.common['Authorization'] = getToken;
        axios.post(apiBaseUrl+'v1/comments/post-comment',input)
        .then(function (response) {
          console.log("Comment Post",response);
          //here I want to rerender this component itself
        })
        .catch(function (error) {
          console.log(error);
        });...
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
Riya Kapuria
  • 9,170
  • 7
  • 18
  • 32
  • React triggers component re-rendering in a case if its state is changed. You need to update component's state so it will be worth to re-render it to display updated state. – Flying Nov 17 '17 at 10:07
  • You need to set state to cause react to rerender. – codejockie Nov 17 '17 at 10:08

1 Answers1

3

There are two things that you can do to cause the same component to render

First: Update a state of the current component using the setState method.

setState() will always lead to a re-render unless shouldComponentUpdate() returns false. If mutable objects are being used and conditional rendering logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.

Second: You can call forceUpdate in case you do not want to update any state of the current component. You can call it like this.forceUpdate().

Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate(). This will trigger the normal lifecycle methods for child components, including the shouldComponentUpdate() method of each child. React will still only update the DOM if the markup changes.

Assuming that you are performing an async request from which you are getting a response you would want to update the component's state with the data that you got and hence setState would be the way forward for you

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • how to write forceUpdate? Like this : component.forceUpdate(callback) – Riya Kapuria Nov 17 '17 at 10:10
  • `this.forceUpdate()` is the way to call forceUpdate – Shubham Khatri Nov 17 '17 at 10:12
  • I'm getting this error : "Cannot read property 'forceUpdate' of undefined" – Riya Kapuria Nov 17 '17 at 10:13
  • I've to do the setState for my all the fields ?? – Riya Kapuria Nov 17 '17 at 10:15
  • what do you mean, setState for all your fields – Shubham Khatri Nov 17 '17 at 10:21
  • axios.defaults.headers.common['Authorization'] = getToken; axios.post(apiBaseUrl+'v1/comments/post-comment',input) .then(function (response) { console.log("Comment Post",response); this.setState({ fields: e.target.value }) should I do like this? – Riya Kapuria Nov 17 '17 at 10:22
  • You should store only those states in your component that you actually need and `this.setState({ fields: e.target.value }) ` won't do you any good since you are not getting the event object as a callback the function. You may however want to store the response on ajax request in state and that you could do by `this.setState({ comments: response }) `. I would suggest you to have a look at the React docs, they are really very helpful – Shubham Khatri Nov 17 '17 at 10:25