fix: add optional chaining to all .map() calls in MarketingBlocks
The error "Cannot read properties of undefined (reading 'map')" indicates some block fields are undefined. Added optional chaining (?.) to all nested .map() calls for features, testimonials, plans, and items arrays. Also renamed prop from 'value' to 'blocks' and added check for pageContent.length > 0. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
---
|
||||
interface Props {
|
||||
value: any[];
|
||||
blocks?: any[];
|
||||
}
|
||||
|
||||
const { value } = Astro.props;
|
||||
const { blocks } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="marketing-blocks">
|
||||
{value.map((block: any) => {
|
||||
{blocks?.map((block: any) => {
|
||||
const type = block._type;
|
||||
if (type === "marketing.hero") {
|
||||
return (
|
||||
@@ -38,7 +38,7 @@ const { value } = Astro.props;
|
||||
{block.subheadline && <p class="section-subheadline">{block.subheadline}</p>}
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
{block.features?.map((feature: any) => (
|
||||
{block.features?.map?.((feature: any) => (
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<span class="icon">{feature.icon}</span>
|
||||
@@ -58,7 +58,7 @@ const { value } = Astro.props;
|
||||
<div class="container">
|
||||
<h2>{block.headline}</h2>
|
||||
<div class="testimonials-grid">
|
||||
{block.testimonials?.map((t: any) => (
|
||||
{block.testimonials?.map?.((t: any) => (
|
||||
<blockquote class="testimonial-card">
|
||||
<p>"{t.quote}"</p>
|
||||
<footer>
|
||||
@@ -77,7 +77,7 @@ const { value } = Astro.props;
|
||||
<section class="pricing-section" id="pricing">
|
||||
<div class="container">
|
||||
<div class="pricing-grid">
|
||||
{block.plans?.map((plan: any) => (
|
||||
{block.plans?.map?.((plan: any) => (
|
||||
<div class={`pricing-card ${plan.highlighted ? "highlighted" : ""}`}>
|
||||
{plan.highlighted && <span class="badge">Most popular</span>}
|
||||
<h3>{plan.name}</h3>
|
||||
@@ -87,7 +87,7 @@ const { value } = Astro.props;
|
||||
</div>
|
||||
{plan.description && <p class="description">{plan.description}</p>}
|
||||
<ul class="features">
|
||||
{plan.features?.map((f: string) => <li>{f}</li>)}
|
||||
{plan.features?.map?.((f: string) => <li>{f}</li>)}
|
||||
</ul>
|
||||
<a href={plan.cta.url} class="btn btn-primary">{plan.cta.label}</a>
|
||||
</div>
|
||||
@@ -103,7 +103,7 @@ const { value } = Astro.props;
|
||||
<div class="container">
|
||||
<h2>{block.headline}</h2>
|
||||
<div class="faq-list">
|
||||
{block.items?.map((item: any) => (
|
||||
{block.items?.map?.((item: any) => (
|
||||
<div class="faq-item">
|
||||
<h3>{item.question}</h3>
|
||||
<p>{item.answer}</p>
|
||||
|
||||
@@ -10,7 +10,7 @@ const pageContent = page?.data.content;
|
||||
---
|
||||
|
||||
<Base title={pageTitle}>
|
||||
{pageContent ? (
|
||||
{pageContent && pageContent.length > 0 ? (
|
||||
<MarketingBlocks blocks={pageContent} />
|
||||
) : (
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user