# Custom CMS React Module with business logic

**URL:** <https://community.hubspot.com/t/custom-cms-react-module-with-business-logic/140785>\
**Category:** CMS Development\
**Created:** [October 9, 2025, 8:21am UTC](https://community.hubspot.com/t/custom-cms-react-module-with-business-logic/140785 "2025-10-09T08:21:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![VSengul\_1](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@VSengul\_1](https://community.hubspot.com/u/VSengul_1)\
**Post date:** [October 9, 2025, 8:21am UTC](https://community.hubspot.com/t/custom-cms-react-module-with-business-logic/140785/1 "2025-10-09T08:21:48Z")

</div>

Hello,  
We are trying to create a custom module to use in CMS.

We need a page to collect the user information and verify it against the information on a contact. If there is such a contact, we need to display a payment page.

 ![VSengul_0-1759997808732.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/a/9a7ac0c2e411c52caacee265f3037ab081c00eef.png)

When the user clicks the “Verify” button, it will call a serverless function that will query HubSpot contacts. The function will return true if there is a matching contact, and a payment page will be displayed.

1- I try to test it in my local dev server by putting a simple console print for the button click event, but it doesn’t even do that.

2- When I upload the project, I don’t see the new module I created.

Here is the code for the module.

```lia-code-sample
import { useState } from 'react';
import {
 ModuleFields,
 TextField,
 RichTextField,
 ImageField,
} from '@hubspot/cms-components/fields';
import { RichText } from '@hubspot/cms-components';
import logo from '../../../assets/sprocket.svg';
import styles from '../../../styles/contributions.module.css';

export function Component({ fieldValues, hublParameters }) {
 const { src, alt, width, height } = fieldValues.logo;
 const { brandColors } = hublParameters;

 const [firstName, setFirstName] = useState('');
 const [lastName, setLastName] = useState('');
 const [memberId, setMemberId] = useState('');
 const [postcode, setPostcode] = useState('');

 const verifyMember = () => {
 console.log('Verifying member...');
console.log(
 `Thank you ${firstName} ${lastName} for your submission! We will be in touch if we need to verify your member ID: ${memberId} and postcode: ${postcode}.`
 )
 }
 return (
 <div
 className={styles.wrapper}
 style={{
 backgroundColor: brandColors?.color,
 opacity: brandColors?.opacity,
 }}
 >
 <img src={src} alt={alt} width={width} height={height} />
 <h1>{fieldValues.headline}</h1>
 <div className={styles.buttons}>
 <input
 name="text"
 placeholder="First Name"
 value={firstName}
 onChange={(e) => setFirstName(e.target.value)}
 />
 </div>
 <div className={styles.buttons}>
 <input
 name="text"
 placeholder="Last Name"
 value={lastName}
 onChange={(e) => setLastName(e.target.value)}
 />
 </div>
 <div className={styles.buttons}>
 <input
 name="text"
 placeholder="Member ID"
 value={memberId}
 onChange={(e) => setMemberId(e.target.value)}
 />
 </div>
 <div className={styles.buttons}>
 <input
 name="text"
 placeholder="Postcode"
 value={postcode}
 onChange={(e) => setPostcode(e.target.value)}
 />
 </div>
 <div className={styles.buttons}>
 <button 
 onClick={verifyMember} >Verify</button>
 </div>
 </div>
 );
}

const richTextFieldDefaultValue = `
 <div>
 <div>
 <span>
 Deploy to your theme by running <pre>npm run deploy</pre> from the root directory
 </span>
 </div>
 </div>
`;

export const fields = (
 <ModuleFields>
 <ImageField
 name="logo"
 label="Logo"
 default={{ src: logo, height: 100, alt: 'HubSpot logo' }}
 resizable={true}
 />
 <TextField
 name="headline"
 label="Headline"
 default="Getting Started with CMS React"
 />
 <RichTextField
 name="gettingStarted"
 label="Getting Started"
 default={richTextFieldDefaultValue}
 />
 </ModuleFields>
);

export const meta = {
 label: 'Contributions',
};

```

I appreciate any help.

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [October 9, 2025, 9:58am UTC](https://community.hubspot.com/t/custom-cms-react-module-with-business-logic/140785/2 "2025-10-09T09:58:26Z")

</div>

Hi @VSengul and welcome, it’s a pleasure to have you here!

Thank you for sharing your approach and questions around building a custom React module for HubSpot CMS on the HubSpot Community.  
I’d love to put you in touch with our Top Experts: Hi @nickdeckerdevs1, @albertsg and @BelBarakat do you have suggestions to help @VSengul, please?  
Have a wonderful day and thanks so much!  
Bérangère

---

<div class="post-metadata">

**Author:** ![BelBarakat](https://avatars.discourse-cdn.com/v4/letter/b/5fc32e/32.png) [@BelBarakat](https://community.hubspot.com/u/BelBarakat)\
**Post date:** [October 9, 2025, 1:28pm UTC](https://community.hubspot.com/t/custom-cms-react-module-with-business-logic/140785/3 "2025-10-09T13:28:12Z")

</div>

Hey @VSengul

Lets start with the first check. Did you put your function where you want to use useState in a React Island?

You need to put the interactive bits in a React Island and render that island from your module. Otherwise the component renders server-side only and never hydrates, so your click handler won’t fire in local dev or on a deployed page.