title: Conection between components React - shopping-cart
body: <p>I tried to bulid shopping cart in React I don't use redux so I think it can be a problem too. I have now alomost done application so I want to finish it in this way without using redux. Ok whats the problem. I made function to add items into the shopping cart in component counter but I don't want to display this products in this component but in main component App in header. In component counter I creat component ShoppingCart to display the products - but I want to only push products into the ShoppingCart but display them in component App. </p>
  
  <p>I tried a lot of diffrent methods but it's not working. I can display products but really not in the place I want. I think the problem is how I can comunicate with my items between components.</p>
  
  <p>This is my Counter</p>
  
  <pre><code>import React, { Component } from "react";
  import "./Counter";
  import "./Counter.css";
  import ShoppingCart from "./ShoppingCart";
  
  class Counter extends Component {
    state = {
      availableProducts: 20,
      shoppingCart: 0,
      cart: []
    };
  
    handleRemoveFromCart = () =&gt; {
      this.setState({
        shoppingCart: this.state.shoppingCart - 1
      });
    };
  
    handleAddToCart = () =&gt; {
      this.setState({
        shoppingCart: this.state.shoppingCart + 1
      });
    };
  
    handleAddProductsToCart = props =&gt; {
      // console.log("clicked", this.props.name, this.state.shoppingCart)
      let found = false;
      const updateCart = this.state.cart.map(cartItem =&gt; {
        if (cartItem.name === this.props.name) {
          found = true;
          cartItem.productsNumber = this.state.shoppingCart;
          return cartItem;
        } else {
          return cartItem;
        }
      });
      if (!found) {
        updateCart.push({
          name: this.props.name,
          productsNumber: this.state.shoppingCart,
          key: this.props.name
        });
      }
      this.setState({
        cart: updateCart
      });
      // return &lt;ShoppingCart cart={updateCart} /&gt;;
      // console.log(updateCart);
    };
  
    render() {
     const cart = this.state.cart.map(cartItem =&gt; (
       &lt;ShoppingCart
          name={cartItem.name}
          productsNumber={cartItem.productsNumber}
          key={cartItem.key}
        /&gt;
      ));
      return (
        &lt;&gt;
          &lt;div className="counter"&gt;
            &lt;button
              className="buttonCount"
              disabled={this.state.shoppingCart === 0 ? true : false}
              onClick={this.handleRemoveFromCart}
            &gt;-&lt;/button&gt;
            &lt;span&gt; {this.state.shoppingCart} &lt;/span&gt;
            &lt;button
              className="buttonCount"
              disabled={
                this.state.shoppingCart === this.state.availableProducts
                  ? true
                  : false
              }
              onClick={this.handleAddToCart}
            &gt;
              +
            &lt;/button&gt;
            &lt;button
              className="buy"
              disabled={this.state.shoppingCart &lt;= 0 ? true : false}
              onClick={this.handleAddProductsToCart}
            &gt;Add to cart&lt;/button&gt;
          &lt;/div&gt;
          &lt;div&gt;{cart}&lt;/div&gt;
  
        &lt;/&gt;
      );
    }
  }
  </code></pre>
  
  <p>export default Counter;</p>
  
  <p>and this is Shopping</p>
  
  <pre><code>import React, {Component} from "react"
  import "./ShoppingCart";
  import "./ShoppingCart.css";
  
  class ShoppingCart extends Component {
  
    render() {
  
        return (
          &lt;&gt;
          &lt;div&gt;{this.props.name}&lt;/div&gt;
          &lt;div&gt;{this.props.productsNumber}&lt;/div&gt;
          &lt;/&gt;
        );
      }
    }
  
  
  export default ShoppingCart;
  </code></pre>
  
  <p>If you have any suggestions it will be helpful. Thank you.</p>