React child components are only half updating when switching from one to the other

Question

I have a Home Component that contains 2 hardcoded routes and 2 mapped ones, I'm parsing the plan object to the Plan component.

<Routes>         
    <Route path='/' element={<Heading>index</Heading>}/>
    <Route path='/profile' element={<Profile />}/>
    {user && 
        user.workoutPlans.map((plan, index) => (    
            plan._id && <Route path={'/' + plan._id} key={index} element={<Plan plan={plan} />} /> 
    ))} 
</Routes>

The Plan Component displays the plan title and contains a section where it maps an array of days to DayCards

<Heading size='2xl' mr={-3}>{plan.title}</Heading>
<Flex direction='column'>
    {plan.days.map((day, index) => (
        day._id && <DayCard planId={plan._id} day={day} key={index} />
    ))}
</Flex>

If I refresh then go to the route app.com/plan1id I get the correct list of days [day1, day2, day3, day4, day5] + Heading: Plan1

If I refresh then go to the route app.com/plan2id I get the correct list of days [other1, other2, other3] + Heading: Plan2

But if I then go from app.com/plan2id to app.com/plan1id I get a messed up list of days [other1, other2, other3, day4, day5] + Heading: Plan1

Its the same in reverse order

But if I refresh then go to the route app.com/plan1id then got to app.com/profile then to app.com/plan2id it works correctly returning [other1, other2, other3] + Heading: Plan2

The app state stays the same the entire time and the plan data is being parsed in correctly as far as I can tell because plan.title always displays correctly

Any ideas about why this is happing would be greatly appreciated

Drew Reese · Accepted Answer · 2022-04-22T05:37:38.840

2

Don't use the array index as a React key.

When switching plans the route changes, but the Plan component remains mounted and only the plan prop value updates. This triggers a rerender. But since the days are using an array index as the React key, the key doesn't change value. Day index 2 in plan "A" is equal to day index 2 in plan "B".

You should instead use a value that is intrinsic to the data being mapped. GUIDs make for great React keys. I suggest using day._id as the React key, assuming these are unique.

<Flex direction='column'>
  {plan.days
    .filter(day => day._id)
    .map((day) => <DayCard planId={plan._id} day={day} key={day._id} />)
  }
</Flex>

May as well correct the routing code too for the Plan component.

<Routes>         
  <Route path='/' element={<Heading>index</Heading>} />
  <Route path='/profile' element={<Profile />} />
  {user?.workoutPlans
    .filter(plan => plan._id)
    .map((plan) => (
      <Route
        path={`/${plan._id}`}
        key={plan._id}
        element={<Plan plan={plan} />}
      />
    ))
  }
</Routes>

edited Apr 22 '22 at 05:37

answered Apr 22 '22 at 05:24

Drew Reese

165,259
14
153
181

Thank you this solved my issue. So was the problem here that I was incorrectly using keys? – jacquesrockell Apr 22 '22 at 05:31
@jacquesrockell Essentially yes. When switching plans the route changes, but the `Plan` component remains mounted and only the `plan` prop value updates. This triggers a rerender. ***But*** since the days are using an array index as the React key, the key doesn't change value. Index 2 in plan "A" is equal to index 2 in plan "B". Does this make sense? – Drew Reese Apr 22 '22 at 05:33
Yes thank you. I had an idea that something like that was happening but was sure why, I guess that's a lesson for me use better keys. – jacquesrockell Apr 22 '22 at 05:38

score 0 · Answer 2 · answered Apr 22 '22 at 05:31

You should also use exact props with Route <Heading> otherwise when you navigate to /profile or other routes then Heading will first get call.

For more reference check this link https://stackoverflow.com/a/49162423/4554623

<Routes>         
  <Route exact path='/' element={<Heading>index</Heading>} />
  <Route path='/profile' element={<Profile />} />
  {user?.workoutPlans
    .filter(plan => plan._id)
    .map((plan) => (
      <Route
        path={`/${plan._id}`}
        key={plan._id}
        element={<Plan plan={plan} />}
      />
    ))
  }
</Routes>

`react-router-dom@6` `Route` components don't have an `exact` prop, and in v6 all routes are now ***always*** exactly matched. That linked answer is for previous versions of RRD. — Drew Reese, Apr 22 '22 at 05:34

React child components are only half updating when switching from one to the other

2 Answers2