# give/4.18.0/src/Campaigns/Blocks/shared/components/GridControl/index.tsx

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

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/Campaigns/Blocks/shared/components/GridControl/index.tsx
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/Campaigns/Blocks/shared/components/GridControl/index.tsx
- Modified: 2025-03-31T19:17:16+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/Campaigns/Blocks/shared/components/GridControl/index.tsx#L10-L20`.

```tsx
import {SelectControl} from '@wordpress/components';

import './styles.scss';

/**
 * @since 4.0.0
 */
export default ({label, options, onChange, value}: GridLayoutProps) => {

    const index = options.findIndex((option) => value === option.value);

    return (
        <>
            <div className="give-campaign-components-gridLayout">
                <div className="give-campaign-components-gridLayout__columns">
                    {Array(index + 1).fill(<div className="give-campaign-components-gridLayout__columns-item"></div>)}
                </div>
            </div>

            <SelectControl
                label={label}
                value={value}
                onChange={(selected: string) => onChange(selected)}
                options={options}
            />
        </>
    )
}

interface GridLayoutProps {
    label: string;
    value: string;
    options: {
        value: string,
        label: string
    }[],
    onChange: (value: string) => void,
}

```