import React, { useState, useEffect } from “react”;
import {
Text,
hubspot, Flex
} from “@hubspot/ui-extensions”;
import {
useCrmProperties,
useAssociations
} from “@hubspot/ui-extensions/crm”;

hubspot.extend(({actions}) => );

const Extension = ({fetchProperties}) => {

const [dealName, setDealName] = useState(”);

useEffect(() => {
fetchProperties([‘dealname’, ‘associations’]).then((properties) => {
setDealName(properties.dealname);
});
}, [fetchProperties]);

const { properties, isLoading, error } = useCrmProperties(
[‘dealname’],
);

if (error) {
return Error loading properties: {error.message};
}

return (

Deal name using ‘fetchCrmObjectProperties’: {dealName}
Deal name using ‘useCrmProperties’: {properties.dealname}

);
};

This is the app card