Should i be using forceUpdate() or finding another way to rerender React component
<p>I have this component and I would like to rerender after my api call. I cant figure out why after api call of getWinks, winks-count does update but not on the view unless I refresh. Should I not be using this.forceUpdate(). Please advise and any criticism is welcome.</p>

<pre><code>export default class Winks extends Component {
  constructor (props) {
    super(props)
    this.insertDecimal = this.insertDecimal.bind(this)
    this.state = ({
      user:cookie.load('user',
    )})
    console.log(this.state)
    this.httpHandler = axios.create({
      baseURL: 'localhost:3000',
      headers: {
        'Authorization': this.state.user.token
      }
    })
  }

  insertDecimal(num) {
     var num = (num / 100).toFixed(2);
     return '$' + num
  }
 getWinks (itemId) {
   this.httpHandler.post("/users/" + this.state.user.id + "/winks", {
      user_id:this.state.user.id,
      wink: {
        product_id:itemId
      }
   }).then(function (response){
     this.forceUpdate()
   }.bind(this))
 }

  render () {
    var listItems = this.props.products.map(function(item, index,) {
      var wink = item.attributes
      if (index % 5 ===0) {
        return (
          &lt;Col lg={2} md={4} sm={4} xs={6}&gt;
            &lt;div className="item"&gt;
              &lt;img className='img-responsive' src={wink["image-url"]}&gt;&lt;/img&gt;
              &lt;div className="item-meta"&gt;
                &lt;span className="name"&gt;{wink.name}&lt;/span&gt;
                &lt;span className="site"&gt; Bloomingdales.com&lt;/span&gt;
                &lt;div className="rate"&gt;
                  &lt;span className="old"&gt;{this.insertDecimal(wink.price)}&lt;/span&gt;
                  &lt;span className="new"&gt;{this.insertDecimal(wink["sale-price"])}&lt;/span&gt;
                &lt;/div&gt;
                &lt;div className="like"&gt;
                  &lt;i onClick={()=&gt;this.getWinks(item.id)} className="fa fa-heart"&gt;&lt;/i&gt;
                  &lt;span&gt;{wink["winks-count"]}&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/Col&gt;
        )
      }
      else {
        return (
          &lt;Col lg={2} md={4} sm={4} xs={6}&gt;
            &lt;div className="item"&gt;
              &lt;img className='img-responsive' src={wink["image-url"]}&gt;&lt;/img&gt;
              &lt;div className="item-meta"&gt;
                &lt;span className="name"&gt;{wink.name}&lt;/span&gt;
                &lt;span className="site"&gt; Bloomingdales.com&lt;/span&gt;
                &lt;div className="rate"&gt;
                  &lt;span className="old"&gt;{this.insertDecimal(wink.price)}&lt;/span&gt;
                  &lt;span className="new"&gt;{this.insertDecimal(wink["sale-price"])}&lt;/span&gt;
                &lt;/div&gt;
                &lt;div className="like"&gt;
                  &lt;i onClick={()=&gt;this.getWinks(item.id)} className="fa fa-heart"&gt;&lt;/i&gt;
                  &lt;span&gt;{wink["winks-count"]}&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/Col&gt;
        )
      }
    }.bind(this));
    return (
        &lt;Row className="item-row"&gt;
          {listItems}
        &lt;/Row&gt;
    )
  }
}
</code></pre>

<p>Parent component: </p>

<pre><code>export default class AllItems extends Component {
  constructor () {
    super()
    this.state=({ user: cookie.load('user')})
    this.httpHandler = axios.create({
      baseURL: 'localhost:3000',
      headers: {
        'Authorization': this.state.user.token
      }
    })
  }

  componentWillMount() {
    this.httpHandler('/products/')
    .then(function (response) {
      this.setState({ winks: response.data.data})
    }.bind(this))
  }
  render() {

      return (
        &lt;Grid&gt;
          &lt;div className="item-wrapper"&gt;
            &lt;Row&gt;
              &lt;h1 className="text-center"&gt;All Items&lt;/h1&gt;
            &lt;/Row&gt;
            &lt;Row&gt;
              &lt;Col xs={2}&gt;
                &lt;div className="item-sidebar-wrapper"&gt;
                  &lt;div className="sort"&gt;
                    &lt;Sort /&gt;
                  &lt;/div&gt;
                  &lt;div className="category"&gt;
                    &lt;Category /&gt;
                  &lt;/div&gt;
                  &lt;div className="price"&gt;
                    &lt;Price /&gt;
                  &lt;/div&gt;
                  &lt;div className="size"&gt;
                    &lt;Size /&gt;
                  &lt;/div&gt;
                  &lt;div className="color"&gt;
                    &lt;Color /&gt;
                  &lt;/div&gt;
                  &lt;div className="brand"&gt;
                    &lt;Brand /&gt;
                  &lt;/div&gt;
                  &lt;div className="stores"&gt;
                    &lt;Stores /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/Col&gt;
              &lt;Col xs={10}&gt;
                &lt;Winks products={this.state.winks} /&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/div&gt;
        &lt;/Grid&gt;
      )
</code></pre>