rigging-portals.jsx

// CartController.jsx
@CartContainer
export default class CartController extends Component {
  static propTypes = {
    cart: PropTypes.object.isRequired,
    adjustQuantity: PropTypes.func.isRequired
  };
  
  render() {
    const { cart, adjustQuantity } = this.props;
    
    return (
      <div className="shopping-cart">
        {cart.items.map( item => 
          <CartItem key={item.id} item={item} adjustQuantity={adjustQuantity}/>
        )}
        {/* Quantity update is rendered via a Portal component, 
            which the parent component doesn't know or care about */}
        <CartQuantityPortal cart={cart} />
      </div>
    )
  }
}

// CartQuantityPortal.jsx
function CartCountPortal({ cart }) {
  const itemCount = cart.items.length;

  // createPortal signature is identical to ReactDOM.render
  return ReactDOM.createPortal(
    <span className=“cart-qauantity__count">{itemCount}</span>, 
    document.getElementById('cart-qauantity’)
  );
}