I have a ponent and in that ponent there's a onClick method defined. On that method,i'm calling for back end and getting some response. values taken from the back end call is set only after i refresh my browser. Is there a way to re render my ponent with refreshing the browser?

I used this.forceUpdate() which is in the react documentation but could not achieve what i needed. How can i re render only my ponent without browser refreshing?

My code.

handleClick(id) {

    this.setState({

        vote_status: !this.state.vote_status,

    })

    let vote_object = {
        voting_object: id,
        post_id: this.props.postId
    }
    this.props.submitvote(vote_object)

    //this.forceUpdate()
}

render() {

    console.log("getVoteStatus", this.props.getVoteStatus)

    let {contents, submitvote, postId, voted_id} = this.props

    return (

        <div className="txt_vote_bar_div" style={{
            color: voted_id === contents.post_poll_content_id ? 'white' : '#9da0a4',
            backgroundColor: this.state.vote_status ? '#0b97c4' : '#FFFFFF'
        }} id={contents.post_poll_content_id}>
            <p className="txt_vote_choice"
               style={{color: this.state.vote_status || voted_id === contents.post_poll_content_id ? '#FFFFFF' : '#6a6a6a'}}
               id={"id" + contents.post_poll_content_id}
               onClick={() => {
                   this.handleClick(contents.post_poll_content_id);

               }}> {contents.content} </p>
            <p className="txt_tot_votes"
               style={{color: this.state.vote_status || voted_id === contents.post_poll_content_id ? '#FFFFFF' : '#6a6a6a'}}> {contents.votes}%
                (Votes:)</p>
        </div>
    );
};

I have a ponent and in that ponent there's a onClick method defined. On that method,i'm calling for back end and getting some response. values taken from the back end call is set only after i refresh my browser. Is there a way to re render my ponent with refreshing the browser?

I used this.forceUpdate() which is in the react documentation but could not achieve what i needed. How can i re render only my ponent without browser refreshing?

My code.

handleClick(id) {

    this.setState({

        vote_status: !this.state.vote_status,

    })

    let vote_object = {
        voting_object: id,
        post_id: this.props.postId
    }
    this.props.submitvote(vote_object)

    //this.forceUpdate()
}

render() {

    console.log("getVoteStatus", this.props.getVoteStatus)

    let {contents, submitvote, postId, voted_id} = this.props

    return (

        <div className="txt_vote_bar_div" style={{
            color: voted_id === contents.post_poll_content_id ? 'white' : '#9da0a4',
            backgroundColor: this.state.vote_status ? '#0b97c4' : '#FFFFFF'
        }} id={contents.post_poll_content_id}>
            <p className="txt_vote_choice"
               style={{color: this.state.vote_status || voted_id === contents.post_poll_content_id ? '#FFFFFF' : '#6a6a6a'}}
               id={"id" + contents.post_poll_content_id}
               onClick={() => {
                   this.handleClick(contents.post_poll_content_id);

               }}> {contents.content} </p>
            <p className="txt_tot_votes"
               style={{color: this.state.vote_status || voted_id === contents.post_poll_content_id ? '#FFFFFF' : '#6a6a6a'}}> {contents.votes}%
                (Votes:)</p>
        </div>
    );
};

• javascript
• reactjs

• 2 setState when your backend call is finished (in your callback/promise), this will THEN re-render your ponent – Nevosis Commented Aug 16, 2017 at 9:58

2 Answers 2

Your using this.forceUpdate() is wrong: at the point you call it, the backend information is not finished. Change code like this:

submitvote(vote_object, done) {
  // ... stuffs ...

  done()
}


handleClick(id) {
  // ... stuffs ...

  this.props.submitvote(vote_object, ()=>{
    this.forceUpdate()
  })
}

By looking at your your code I think You don't need forceUpdate here . what you need is a callback function,inside that you need to call setState. This will re render your ponent.

    this.props.submitvote(vote_object,this.successfunction);

your Submitvote() method should be like

    submitvote(vote_object, success) { 

  success()
}

Include the below success method in your ponent. Once the submit vote done call the success function.

    successfunction(){
      this.setState({yourState:value});
    }