# Vue: [Vue warn]: <TransitionGroup> children must be keyed: <li>

**Code:** `[Vue warn]: <TransitionGroup> children must be keyed` · **Category:** Vue · **Seen on:** Vue

Children of `<TransitionGroup>` lack a unique `key`, so animations can't track items.

## Meaning

Add `:key` with a stable unique value to each direct child (not the index if items reorder). `v-for` inside `<TransitionGroup>` needs keys; also set `tag` if you want a wrapper element.

## Common causes

- `v-for` without `:key` inside TransitionGroup
- Non-unique/random keys
- Keys on a wrapper instead of direct children
- Conditional children without keys
- Copying `<transition>` usage

## Quick fix

1. `<TransitionGroup name="list" tag="ul"><li v-for="i in items" :key="i.id">`
2. Use stable ids
3. Put the key on the element directly under the group

## Detailed fix by platform

### Vue

1. `<TransitionGroup name="fade" tag="ul"><li v-for="t in todos" :key="t.id">{{ t.text }}</li></TransitionGroup>`

## How to diagnose

1. **Key** — Present?
2. **Unique** — Stable?
3. **Level** — Direct child?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/vue/vue-warn-transitiongroup-children-must-be-keyed)