title: REACT: Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string
body: <p>I need to use a quantity for my cart, I'm learning react, but I get this warning: <code>Warning: Received NaN for the </code>children<code> attribute. If this is expected, cast the value to a string.</code></p>
  <pre><code>import { createContext, useState, useContext, useEffect } from &quot;react&quot;;
  
  export const CartContext = createContext([]);
  
  export const CartProvider = ({children}) =&gt; {
  
      const [cart, setCart] = useState([]);
      //const cantidadProductos = cart.length;
  
  
      const [cartQuantity, setCartQuantity] = useState(0);
  
      useEffect(() =&gt; {
          const getQuantity = () =&gt; {
              let cantidadTotalProductos = 0;
              cart.forEach((orden)=&gt;{
                  cantidadTotalProductos += Number(orden.cantidadTotalProductos);
              });
              setCartQuantity(cantidadTotalProductos);
          }
          getQuantity();
      }, [cart]);
  
  
  
      const addItem = (item, cantidad) =&gt; {
          const newItem = { item, cantidad };
          const itemEsta = cart.find((order) =&gt; order.item.id === item.id);
  
          if(itemEsta){
              const actualizarCarrito = cart.map((order) =&gt; {
                  if(order.item.id === item.id){
                      return {...order, cantidad: cantidad + order.cantidad};
                  }else{
                      return order;
                  }
              });
              setCart(actualizarCarrito);
          }else{
              setCart((prevState) =&gt; [...prevState, newItem]);
          }
      };
  
      const removeItem = (id) =&gt; {
          setCart((prev) =&gt; prev.filter((element) =&gt; element.item.id !== id));
      };
  
      const clearAll = () =&gt; {
          setCart([]);
      };
  
  
      return (
          &lt;CartContext.Provider value={{ cart, addItem, removeItem, clearAll, cartQuantity }}&gt;
              {children}
          &lt;/CartContext.Provider&gt;
      );
  };
  
  export const useCart = () =&gt; useContext(CartContext);
  </code></pre>
  <p>And then in the component:</p>
  <pre><code>import './Carrito.css';
  import { useCart } from &quot;../context/CartContext&quot;;
  
  function Carrito () {
  
      const { cartQuantity } = useCart();
      return &lt;div className=&quot;editarCarrito&quot;&gt;
          &lt;p className=&quot;carritoCantidad&quot;&gt;{ cartQuantity }&lt;/p&gt;
      &lt;/div&gt;
          
  }
  
  export default Carrito;
  </code></pre>