Product detail
- React Native course
- Intermediate
- Lesson 67/116
- 6 min
Write the product detail screen.
Product detail
Tapping a product in the list opens the detail screen. We keep the choice in a selectedId state: const [selectedId, setSelectedId] = useState(null). We find the chosen product with products.find((p) => p.id === selectedId).
If selected is set we show the detail, otherwise the list. This is the simplest way to switch screens; no full navigation library is needed.
Going back
To return from the detail to the list, we call setSelectedId(null). This clears the choice and selected becomes null again, so the list reappears.
A <Text onPress={() => setSelectedId(null)}>Back</Text> button is enough. Instead of a full navigation library, this simple method is enough for a state switch on one screen.
Practice Add the detail screen
If selected is set, show the detail: with if (selected) return <Text>{selected.name}</Text> and a back button (setSelectedId(null)). Otherwise show the list.
Starter code
import React, { useState } from 'react';
import { FlatList, Text, View } from 'react-native';
const products = [
{ id: '1', name: 'Pen', price: 20 },
{ id: '2', name: 'Notebook', price: 35 },
]
export default function App() {
const [selectedId, setSelectedId] = useState(null);
const selected = products.find((p) => p.id === selectedId);
// If selected show the detail, otherwise the list
return (
<View>
<Text>Store</Text>
<FlatList
data={products}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <Text>{item.name}</Text>}
/>
</View>
);
}Sample solution
import React, { useState } from 'react';
import { FlatList, Text, View } from 'react-native';
const products = [
{ id: '1', name: 'Pen', price: 20 },
{ id: '2', name: 'Notebook', price: 35 },
]
export default function App() {
const [selectedId, setSelectedId] = useState(null);
const selected = products.find((p) => p.id === selectedId);
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>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the detail concepts
| Term | Meaning |
|---|---|
selectedId |
Chosen product id |
find |
Finds product |
selected |
Found product |
null |
No choice |
2 When is selected truthy?
- When the list is empty
- When selectedId is null
- When a product is found Correct answer
- When the cart is full
Explanation: If find returns a product, selected is truthy.
3 Write the back button
<Text onPress={() => ____(null)}>Geri</Text><Text onPress={() => setSelectedId(null)}>Geri</Text>Explanation: setSelectedId(null) clears the choice.