Social Media Carousel
8 cards • Download as ZIP (images) or PDF (LinkedIn)
Debugging the Invisible
When Your TOC Goes Missing
How custom React components can break auto-generated features, and why understanding DOM-based tooling is essential.
The Table of Contents showed only 3 items when the blog had 11 sections. Something was very wrong.
The Root Cause
Custom visual components replaced markdown content. The H2 headings in markdown were never rendered to the DOM - only H3s from the component existed.
The Investigation
- 1
1. Check TOC component for filters
- 2
2. Verify markdown heading syntax
- 3
3. Inspect the rendered DOM
- 4
4. Trace component rendering logic
The Problem
Expected: Markdown H2s in DOM
Reality: Only component H3s exist
The Fix
Add explicit semantic H2 headings to visual components. The TOC scans the DOM for H2/H3 elements - they must exist in the rendered output.
The Lesson
DOM-based tools only see what's rendered. Custom components must include explicit semantic structure for features that scan the DOM.
Building Custom Components?
We can help you build React components that work seamlessly with your blog system.
Building JJM: The Blog
Share This Article
Spread the knowledge