Now it gets interesting: a single Magento product object carries CONSIDERABLY more data than just name and price – and much of it lives in custom_attributes, a flat array rather than a direct field.

fetchProductBySku() in the API client

// ... BASE_URL, ACCESS_TOKEN, PAGE_SIZE, magentoFetch(), fetchProducts() as in chapter 8 ...

export async function fetchProductBySku(sku) {
  const product = await magentoFetch(`/products/${encodeURIComponent(sku)}`);
  return product;
}

encodeURIComponent(sku) matters: some SKUs contain special characters like spaces or slashes that must be encoded in a URL – EXACTLY the same pattern as in "React for Beginners" chapter 22.

A product's raw response structure

Before writing code, a look at a REAL (shortened) Magento product response – call GET /V1/products/YOUR-SKU with the token from chapter 5 to see your own, full version:

{
  "sku": "WSH12-BLUE",
  "name": "Blue Cotton Shirt",
  "price": 39.99,
  "status": 1,
  "custom_attributes": [
    { "attribute_code": "description", "value": "A comfortable cotton shirt..." },
    { "attribute_code": "color", "value": "58" },
    { "attribute_code": "image", "value": "/w/s/wsh12-blue_1.jpg" }
  ],
  "media_gallery_entries": [ ... ],
  "extension_attributes": { "stock_item": { ... } }
}

Safely reading custom_attributes: a helper function

Since custom_attributes is an ARRAY (not an object with direct field access), we need a small helper function to get at a specific value:

// ... previous code ...

export function readCustomAttribute(product, attributeCode) {
  const attribute = product.custom_attributes?.find(
    (a) => a.attribute_code === attributeCode
  );
  return attribute?.value ?? null;
}

?.find(...) and ?? null safely handle two common cases: custom_attributes might be missing (optional chaining), and the attribute you're looking for might simply not exist on this specific product (nullish coalescing).

ProductDetailPage.jsx: displaying all data

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { fetchProductBySku, readCustomAttribute } from '../api/magentoApi';

function ProductDetailPage() {
  const { sku } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    async function load() {
      const data = await fetchProductBySku(sku);
      setProduct(data);
      setLoading(false);
    }
    load();
  }, [sku]);

  if (loading) {
    return <p>Loading product...</p>;
  }

  const description = readCustomAttribute(product, 'description');

  return (
    <div>
      <h1>{product.name}</h1>
      <p>SKU: {product.sku}</p>
      <p>{product.price} €</p>
      {description && (
        <div dangerouslySetInnerHTML={{ __html: description }} />
      )}
    </div>
  );
}

export default ProductDetailPage;

More commonly used custom_attributes

• short_description – short description, also often with HTML.
• meta_title/meta_description – the product's SEO metadata.
• special_price – a discounted price, if set in the admin.
• weight – weight, relevant for shipping calculations.