Putting it together
- React Native course
- Intermediate
- Lesson 69/116
- 6 min
Combine all parts into a working e-commerce app.
Putting it together
In the final step we wire all the pieces together. We add a useCart hook: () => useContext(CartContext). This hook gives a single point of access to the cart; every screen gets cart and addToCart without prop drilling.
We put a Cart: {cart.length} counter in the header and an Add to cart button on the detail. The button calls addToCart(selected); the product is added and the counter updates at once. The app now has a single flow.
Practice Add useCart and the add-to-cart button
Add a useCart hook (return useContext(CartContext)). In App reach the cart with const { cart, addToCart } = useCart(); show Cart: {cart.length} in the header; add a <Text onPress={() => addToCart(selected)}>Add to cart</Text> button on the detail.
Starter code
import React, { createContext, useContext, useState } from 'react';
import { FlatList, Text, View } from 'react-native';
const products = [
{ id: '1', name: 'Pen', price: 20 },
{ id: '2', name: 'Notebook', price: 35 },
]
const CartContext = createContext();
function CartProvider({ children }) {
const [cart, setCart] = useState([]);
const addToCart = (item) => setCart([...cart, item]);
return (
<CartContext.Provider value={{ cart, addToCart }}>
{children}
</CartContext.Provider>
);
}
// Add the useCart hook
export default function App() {
const [selectedId, setSelectedId] = useState(null);
const selected = products.find((p) => p.id === selectedId);
// Show the cart count with useCart, add an add-to-cart button on the detail
if (selected) {
return (
<View>
<Text>{selected.name}</Text>
<Text onPress={() => setSelectedId(null)}>Back</Text>
</View>
);
}
return (
<View>
<Text>Store</Text>
<FlatList
data={products}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<Text onPress={() => setSelectedId(item.id)}>{item.name}</Text>
)}
/>
</View>
);
}Sample solution
import React, { createContext, useContext, useState } from 'react';
import { FlatList, Text, View } from 'react-native';
const products = [
{ id: '1', name: 'Pen', price: 20 },
{ id: '2', name: 'Notebook', price: 35 },
]
const CartContext = createContext();
function CartProvider({ children }) {
const [cart, setCart] = useState([]);
const addToCart = (item) => setCart([...cart, item]);
return (
<CartContext.Provider value={{ cart, addToCart }}>
{children}
</CartContext.Provider>
);
}
function useCart() {
return useContext(CartContext);
}
export default function App() {
const [selectedId, setSelectedId] = useState(null);
const selected = products.find((p) => p.id === selectedId);
const { cart, addToCart } = useCart();
if (selected) {
return (
<View>
<Text>{selected.name}</Text>
<Text onPress={() => setSelectedId(null)}>Back</Text>
<Text onPress={() => addToCart(selected)}>Add to cart</Text>
</View>
);
}
return (
<View>
<Text>Cart: {cart.length}</Text>
<FlatList
data={products}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<Text onPress={() => setSelectedId(item.id)}>{item.name}</Text>
)}
/>
</View>
);
}The app is complete
Now all the pieces are together: product data, a FlatList, a state-driven detail switch and a Context cart. useCart gives a single point of access to the cart; the counter and the button make it visible.
This structure is the same in a real app: data, list, detail and a shared cart. If you want to add a navigation library, you can swap selectedId for React Navigation; the Context stays the same.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does the useCart hook return?
- The result of useContext(CartContext) Correct answer
- A new Context
- The products array
- The selected product
Explanation: useCart returns useContext(CartContext).
2 Write the cart counter
<Text>Sepet: {____}</Text><Text>Sepet: {cart.length}</Text>Explanation: cart.length gives the number of items in the cart.
3 Match the integration concepts
| Term | Meaning |
|---|---|
useCart |
Reaches the cart |
cart.length |
Cart count |
addToCart(selected) |
Adds product |
CartProvider |
Wraps the app |