title: Conditional rendering reactjs
body: <p>Please I am trying to use conditional rendering but I can't seem to get it right. I want to conditionally display the product and page. Such that on the click of <code>&lt;button&gt;Cart{this.state.count}&lt;/button&gt;</code> it takes user to the cart page</p>
  <pre><code>
   render() {
        return (
         &lt;div&gt;
            &lt;div id=&quot;container&quot;&gt;
        &lt;button&gt;Cart {this.state.count}&lt;/button&gt;
            {this.state.products.map((product) =&gt;(
              &lt;div key={product.id} id=&quot;products&quot;&gt;
              &lt;img className=&quot;img&quot; src={product.image} alt=&quot;&quot;/&gt;
              &lt;h1&gt;{product.category}&lt;/h1&gt;
              &lt;h4&gt;{product.price}&lt;/h4&gt;
              &lt;button onClick={() =&gt; this.addCart(product)}&gt;Add to Cart&lt;/button&gt;
                    &lt;/div&gt;))}
           &lt;/div&gt;
            
                  &lt;div className=&quot;cart&quot;&gt;
                    {this.state.cart?.map((item) =&gt; (
                      &lt;div className=&quot;itemBox&quot;&gt;
                        &lt;div&gt;
                          &lt;img className=&quot;cartImage&quot; src={item.image} /&gt;
                        &lt;/div&gt;
                        &lt;button onClick={()=&gt;this.removeCart(item)}&gt;Remove&lt;/button&gt;
                      &lt;/div&gt;
                    ))}
                  &lt;/div&gt;
                &lt;/div&gt;
         )
  
  }
  }
  export default App
  
  
  
  </code></pre>