# give/4.18.0/src/DonationForms/resources/app/fields/GatewayFieldNode.tsx

GiveWP – Donation Plugin and Fundraising Platform, version 4.18.0. 23 lines.

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/DonationForms/resources/app/fields/GatewayFieldNode.tsx
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/DonationForms/resources/app/fields/GatewayFieldNode.tsx
- Modified: 2024-01-10T19:22:20+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.18.0/code/src/DonationForms/resources/app/fields/GatewayFieldNode.tsx#L10-L20`.

```tsx
import type {Field} from '@givewp/forms/types';
import registerFieldAndBuildProps from '../utilities/registerFieldAndBuildProps';
import {useDonationFormState} from '@givewp/forms/app/store';
import {withTemplateWrapper} from '@givewp/forms/app/templates';
import memoNode from '@givewp/forms/app/utilities/memoNode';

const formTemplates = window.givewp.form.templates;
const GatewayFieldTemplate = withTemplateWrapper(formTemplates.fields.gateways);

function GatewayFieldNode({node}: {node: Field}) {
    const {register} = window.givewp.form.hooks.useFormContext();
    const {errors} = window.givewp.form.hooks.useFormState();
    const fieldProps = registerFieldAndBuildProps(node, register, errors);
    const {gateways} = useDonationFormState();

    // @ts-ignore
    return <GatewayFieldTemplate key={node.name} {...fieldProps} gateways={gateways} />;
}

const MemoizedGatewayFieldNode = memoNode(GatewayFieldNode);

export default MemoizedGatewayFieldNode;

```