# give/4.18.0/src/Promotions/InPluginUpsells/resources/js/components/MustHaveAddons.js

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

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/Promotions/InPluginUpsells/resources/js/components/MustHaveAddons.js
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/Promotions/InPluginUpsells/resources/js/components/MustHaveAddons.js
- Modified: 2022-02-25T01:33:58+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/Promotions/InPluginUpsells/resources/js/components/MustHaveAddons.js#L10-L20`.

```javascript
import {__} from '@wordpress/i18n';

import {MustHaveAddonCard} from './MustHaveAddonCard';
import {Hero} from './Hero';
import styles from './MustHaveAddons.module.css';

const {addonButtonCaption, addons, description, heading} = window.GiveAddons.mustHaveAddons;

export const MustHaveAddons = () => (
    <article>
        <Hero heading={heading} description={description} />
        <ul className={styles.grid}>
            {addons.map(({name, description, url, icon, image, features}) => (
                <li key={name}>
                    <MustHaveAddonCard
                        name={name}
                        description={description}
                        icon={icon}
                        image={image}
                        features={features}
                        actionLink={url}
                        actionText={addonButtonCaption}
                    />
                </li>
            ))}
        </ul>
    </article>
);

```