docs: use useMemo in getting image field

This commit is contained in:
Daniel Lautzenheiser 2023-02-02 11:25:57 -05:00
parent f1d16f1260
commit ea32d6b2c4
2 changed files with 4 additions and 4 deletions

View File

@ -44,7 +44,7 @@ The following parameters will be passed to your `react_component` during render:
```js
const PostPreview = ({ widgetFor, entry, collection, fields }) => {
const imageField = fields.find((field) => field.name === 'image');
const imageField = useMemo(fields.find((field) => field.name === 'image'), [fields]);
const imageUrl = useMediaAsset(entry.data.image, collection, imageField, entry);
return h(
@ -63,7 +63,7 @@ CMS.registerPreviewTemplate('posts', PostPreview);
import CMS, { useMediaAsset } from '@staticcms/core';
const PostPreview = ({ widgetFor, entry, collection, fields }) => {
const imageField = fields.find((field) => field.name === 'image');
const imageField = useMemo(fields.find((field) => field.name === 'image'), [fields]);
const imageUrl = useMediaAsset(entry.data.image, collection, imageField, entry);
return (
@ -98,7 +98,7 @@ const PostPreview = ({
collection,
fields,
}: TemplatePreviewProps<Post>) => {
const imageField = fields.find((field) => field.name === 'image');
const imageField = useMemo(fields.find((field) => field.name === 'image'), [fields]);
const imageUrl = useMediaAsset(entry.data.image, collection, imageField, entry);
return (

View File

@ -109,7 +109,7 @@ const PostPreview: FC<TemplatePreviewProps<PostPreviewData>> = ({
}) => {
const dateString = useMemo(() => entry.data.date, [entry.data.date]);
const imageField = fields.find((field) => field.name === 'image');
const imageField = useMemo(fields.find((field) => field.name === 'image'), [fields]);
const image = useMediaAsset(entry.data.image ?? '', collection, imageField, entry);
return (