@@ -3237,14 +3237,14 @@ Rendering Quirks with List of Elements
3237
3237
3238
3238
If you're rendering a list of elements in your component, to help LiveComponents
3239
3239
understand which element is which between re-renders (i.e. if something re-orders
3240
- or removes some of those elements), you can add a ``id `` attribute to
3240
+ or removes some of those elements), you can add a ``key `` attribute to
3241
3241
each element
3242
3242
3243
3243
.. code-block :: html+twig
3244
3244
3245
3245
{# templates/components/Invoice.html.twig #}
3246
3246
{% for lineItem in lineItems %}
3247
- <div id ="{{ lineItem.id }}">
3247
+ <div key ="{{ lineItem.id }}">
3248
3248
{{ lineItem.name }}
3249
3249
</div>
3250
3250
{% endfor %}
@@ -3259,10 +3259,6 @@ the list changes as the user types into a search box... or by clicking
3259
3259
"delete" on an item. In this case, the wrong children may be removed
3260
3260
or existing child components may not disappear when they should.
3261
3261
3262
- .. versionadded :: 2.8
3263
-
3264
- The ``key `` prop was added in Symfony UX Live Component 2.8.
3265
-
3266
3262
To fix this, add a ``key `` prop to each child component that's unique
3267
3263
to that component:
3268
3264
@@ -3277,9 +3273,7 @@ to that component:
3277
3273
{% endfor %}
3278
3274
3279
3275
The ``key `` will be used to generate an ``id `` attribute,
3280
- which will be used to identify each child component. You can
3281
- also pass in a ``id `` attribute directly, but ``key `` is
3282
- a bit more convenient.
3276
+ which will be used to identify each child component.
3283
3277
3284
3278
.. _rendering-loop-new-element :
3285
3279
0 commit comments