Product detail

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.

Exercise 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.

Show example 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>
  );
}

Test yourself

Match the detail concepts

selectedId

Chosen product id
find

Finds product
selected

Found product
null

No choice
When is selected truthy?
- When the list is empty
- When selectedId is null
- When a product is found
- When the cart is full
Show answer

When a product is found — If find returns a product, selected is truthy.

Write the back button

<Text onPress={() => ____(null)}>Geri</Text>

Show answer

<Text onPress={() => setSelectedId(null)}>Geri</Text>

Next lesson: Cart

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies