title: React - Not able to update list of product component
body: <p>I made a list of product which contains name, price etc.. properties. Then I created a simple search box and I am searching my products based on product name . the search result returns the correct object but the UI is not getting updated with that result.Initially, I am able to see the list but after searching it is not getting updated.  I am new to react SO need some help. here is my code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> OnInputChange(term)
    {
      let result=   this.products.filter(product=&gt;{
             return product.name==term;
  
       });
       console.log(result);
  
  
       let list=result.map((product)=&gt;
       {
          return &lt;li  key={product.price}&gt;{product.name}&lt;/li&gt;
  
       });
       console.log(list);
       this.setState({listOfProducts:list});
    }
  
      render()
      {
  
          this.state.listOfProducts=this.products.map((product)=&gt;
          {
             return &lt;li key={product.price}&gt;{product.name}&lt;/li&gt;
  
          });
         return &lt;div&gt;
             
             &lt;input onChange={event=&gt;{this.OnInputChange(event.target.value)}}/&gt;
             &lt;ul&gt;{this.state.listOfProducts}&lt;/ul&gt;
             
             &lt;/div&gt;
  
      }</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>}`
  </code></pre>