---
title: parseMetafield
description: A function that uses metafield.
api_version: 2026-04
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen-react/latest/utilities/parsemetafield'
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/utilities/parsemetafield.md
api_name: hydrogen-react
---

# parse​Metafield

A function that uses `metafield.type` to parse the Metafield's `value` or `reference` or `references` (depending on the `metafield.type`) and places the result in `metafield.parsedValue`.

## parse​Metafield(**[metafield](#props-propertydetail-metafield)**​)

### Parameters

* **metafield**

  **PartialDeep\<MetafieldBaseType, {recurseIntoArrays: true}>**

  **required**

### Returns

* **ReturnGeneric**

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {parseMetafield} from '@shopify/hydrogen-react';

  export function DateMetafield({metafield}) {
    const parsedMetafield = parseMetafield(metafield);

    return <div>Date: {parsedMetafield.parsedValue?.toDateString()}</div>;
  }

  export function VariantReferenceMetafield({metafield}) {
    const parsedMetafield = parseMetafield(metafield);

    return <div>Variant title: {parsedMetafield.parsedValue?.title}</div>;
  }

  export function ListCollectionReferenceMetafield({metafield}) {
    const parsedMetafield = parseMetafield(metafield);

    return (
      <div>
        The first collection title: {parsedMetafield.parsedValue?.[0].title}
      </div>
    );
  }
  ```

  ##### TypeScript

  ```tsx
  import {parseMetafield, type ParsedMetafields} from '@shopify/hydrogen-react';
  import type {Metafield} from '@shopify/hydrogen-react/storefront-api-types';

  export function DateMetafield({metafield}: {metafield: Metafield}) {
    const parsedMetafield = parseMetafield<ParsedMetafields['date']>(metafield);

    return <div>Date: {parsedMetafield.parsedValue?.toDateString()}</div>;
  }

  export function VariantReferenceMetafield({metafield}: {metafield: Metafield}) {
    const parsedMetafield =
      parseMetafield<ParsedMetafields['variant_reference']>(metafield);

    return <div>Variant title: {parsedMetafield.parsedValue?.title}</div>;
  }

  export function ListCollectionReferenceMetafield({
    metafield,
  }: {
    metafield: Metafield;
  }) {
    const parsedMetafield =
      parseMetafield<ParsedMetafields['list.collection_reference']>(metafield);

    return (
      <div>
        The first collection title: {parsedMetafield.parsedValue?.[0].title}
      </div>
    );
  }
  ```

***