title: Refresh a specific component 's data/ state in React
body: <p>I have a List of products-ID and a button. When I press the button, I want to refresh the data in the ListComponent. I have no idea how can I do this in React. Can someone help me?</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.state = {
        products: this.props.productData //where productData an array of all products-ID
      };
      this.refresh = this.refresh.bind(this);
   }  
  
  
    refresh() {
      this.setState({ products: null });
      this.forceUpdate();
    }
  
    render() {
      const { products } = this.state;
            &lt;Button onClick={this.refresh} /&gt;
            &lt;ListComponent
              data={products.map(entry =&gt; ({
                text: entry.productId
              }))}
            /&gt;
      );
    }
  }
  
  const mapStateToProps = (state, ownProps) =&gt; {
    const products = selectAllProducts(state); //function that fetches-takes all products
    return {
      productData: products.map(products =&gt; ({
        productId: product.get("productId")
      }))
    };
  };
  </code></pre>