fix: resolve eslint immutability error in StepChecklist
Pre-compute section header visibility before render instead of mutating a variable during .map() callback, which violates react-hooks/immutability. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -11,15 +11,22 @@ interface StepChecklistProps {
|
|||||||
|
|
||||||
export function StepChecklist({ steps, currentStepIndex, completedStepIds, onStepClick }: StepChecklistProps) {
|
export function StepChecklist({ steps, currentStepIndex, completedStepIds, onStepClick }: StepChecklistProps) {
|
||||||
const procedureSteps = steps.filter((s) => s.type === 'procedure_step')
|
const procedureSteps = steps.filter((s) => s.type === 'procedure_step')
|
||||||
let lastSection: string | undefined
|
|
||||||
|
// Pre-compute which steps should show a section header
|
||||||
|
const sectionVisibility = new Set<number>()
|
||||||
|
let prevSection: string | undefined
|
||||||
|
for (let i = 0; i < procedureSteps.length; i++) {
|
||||||
|
const header = procedureSteps[i].section_header
|
||||||
|
if (header && header !== prevSection) sectionVisibility.add(i)
|
||||||
|
if (header) prevSection = header
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="space-y-0.5">
|
<nav className="space-y-0.5">
|
||||||
{procedureSteps.map((step, index) => {
|
{procedureSteps.map((step, index) => {
|
||||||
const isCompleted = completedStepIds.has(step.id)
|
const isCompleted = completedStepIds.has(step.id)
|
||||||
const isCurrent = index === currentStepIndex
|
const isCurrent = index === currentStepIndex
|
||||||
const showSection = step.section_header && step.section_header !== lastSection
|
const showSection = sectionVisibility.has(index)
|
||||||
if (step.section_header) lastSection = step.section_header
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={step.id}>
|
<div key={step.id}>
|
||||||
|
|||||||
Reference in New Issue
Block a user