Sanity Annotation Renderer

ProductRenderer.js

import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import sanityClient from 'part:@sanity/base/client'

const apiVersion = `2021-05-19`
const client = sanityClient.withConfig({ apiVersion })
let count = 0;

const ProductRenderer = props => {
    const [product, setProduct] = useState({});
    useEffect(() => {
        async function fetchProduct() {
            try {
                const res = await client.getDocument(props._ref);
                setProduct(res);
            } catch (err) {
                console.log(err);
            }
        }
        if (count < 5) {
            fetchProduct();
            count++;
        }
    });

    return <span>{props.children} ({product?.name})</span>
}

ProductRenderer.propTypes = {
    children: PropTypes.node.isRequired,
    _ref: PropTypes.node.isRequired,
}

export default ProductRenderer