What are Props? Displaying a Catchphrase with HubSpot x React [HubSpot x React Day 1]

What are props? Displaying a catchphrase with HubSpot x React [Day 1]

2025-05-01 · Reina

Introduction 🌿

I succeeded in creating a React theme in HubSpot, but I still don't quite get how to "write modules with React"! So, I've started this series to learn about React modules at my own pace 📘

---

What you will learn from this article ✏️

• How do you write HubSpot React modules?
• What are props? How do you use them?
• How are they connected to the page editor?

---

Conclusion 🎯

React modules can display inputs from the HubSpot editor through props! By styling with inline styles, everything can be contained within index.jsx, making it very simple💡

Today's Module 🛠️

Today's module is a simple one that displays a catchphrase specified in a text field!

The code for the module (src/theme/components/modules/CatchphraseDisplay/index.jsx) is as follows:

// Import TextField and ModuleFields from HubSpot's CMS components library
import { TextField, ModuleFields } from '@hubspot/cms-components/fields';

// This is the main part of the React module! It receives fieldValues as props from HubSpot
export const Component = ({ fieldValues }) => {
  // Extract the value named catchphrase from fieldValues (must match the TextField's name)
  const { catchphrase } = fieldValues;

  return (
    // Display a box styled with inline styles (background color, left border, text color, padding, border radius)
    <div
      style={{
        backgroundColor: '#FEF3C7', // Equivalent to Tailwind's bg-orange-100
        borderLeft: '4px solid #F97316', // Equivalent to Tailwind's border-orange-500
        color: '#7C2D12', // Equivalent to Tailwind's text-orange-900
        padding: '1rem',
        borderRadius: '0.5rem',
      }}
    >
      <p
        style={{
          fontSize: '1.125rem', // Tailwind's text-lg
          fontWeight: 600, // Tailwind's font-semibold
          margin: 0, // Reset paragraph margin
        }}
      >
        {/* The catchphrase entered in the page editor will be displayed here! */}
        {catchphrase}
      </p>
    </div>
  );
};

// Area to define the fields included in this module
export const fields = (
  <ModuleFields>
    {/* Text field. name is used as the key for fieldValues! */}
    <TextField
      name="catchphrase" // Key name used as fieldValues.catchphrase
      label="Catchphrase" // Label displayed in the CMS editor
      default="Life is like React. It changes depending on the state!" // Default value (example)
    />
  </ModuleFields>
);

// Module meta information (module name displayed in the editor, etc.)
export const meta = {
  label: "Catchphrase Display", // Module label name
};

Explanation of Module Configuration 🔍

What are props?

props (property) are a mechanism for passing values from the outside to a React component.
In HubSpot React modules, values entered in the editor are passed as props (specifically, an object called fieldValues).

Learn more here: Passing Props to a Component

① ModuleFields = Field definition area for the entire module

It's like the React version of fields.json!

• List and define the fields used in this module inside ModuleFields.
• The name="catchphrase" in TextField becomes the "props key".

② export const Component = ({ fieldValues }) => { ... }

Here, you can receive all field values passed from the CMS side under the name fieldValues!

③ const { catchphrase } = fieldValues;

This is JavaScript destructuring assignment.

const catchphrase = fieldValues.catchphrase;

It means the same thing!

④ Using { catchphrase } inside return!

return (
  <p>{catchphrase}</p>
);

With this, React displays the catchphrase string on the screen 🌟

🌟 Overall Flow

<TextField name="catchphrase" />
↓
→ Enter in CMS editor → Save
↓
→ HubSpot passes `fieldValues = { catchphrase: "entered text" }` to React
↓
→ Extract with `const { catchphrase } = fieldValues`
↓
→ Write `{catchphrase}` in return to display! 

A Quick Word ⚡

I tried to apply styles with Tailwind, but I gave up because the build and import didn't go well... 🥲 I want to try again someday while referring to this documentation! Since it worked well with inline styles this time, I'm very satisfied for now ♡

Summary ✨

Day 1 was very satisfying as I got to understand the "minimal form" of a React module! The excitement of being able to display field values through props... ✨ I want to try creating a UI with a bit of movement next time!