fix(09-01): fix hydration mismatch in TextFillForm — use useEffect for initialData seed

This commit is contained in:
Chandler Copeland
2026-03-21 12:27:09 -06:00
parent a784e50e10
commit a77a144f6f

View File

@@ -1,5 +1,5 @@
'use client'; 'use client';
import { useState } from 'react'; import { useEffect, useState } from 'react';
interface TextRow { label: string; value: string; } interface TextRow { label: string; value: string; }
@@ -17,7 +17,14 @@ function buildInitialRows(initialData?: Record<string, string>): TextRow[] {
} }
export function TextFillForm({ onChange, initialData }: TextFillFormProps) { export function TextFillForm({ onChange, initialData }: TextFillFormProps) {
const [rows, setRows] = useState<TextRow[]>(() => buildInitialRows(initialData)); const [rows, setRows] = useState<TextRow[]>([{ label: '', value: '' }]);
useEffect(() => {
if (initialData && Object.keys(initialData).length > 0) {
setRows(buildInitialRows(initialData));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
function updateRow(index: number, field: 'label' | 'value', val: string) { function updateRow(index: number, field: 'label' | 'value', val: string) {
const next = rows.map((r, i) => i === index ? { ...r, [field]: val } : r); const next = rows.map((r, i) => i === index ? { ...r, [field]: val } : r);