Skip to content

Commit 304acf8

Browse files
committed
key is more reliable with child components
1 parent 61819ae commit 304acf8

File tree

1 file changed

+3
-9
lines changed

1 file changed

+3
-9
lines changed

src/LiveComponent/doc/index.rst

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3237,14 +3237,14 @@ Rendering Quirks with List of Elements
32373237

32383238
If you're rendering a list of elements in your component, to help LiveComponents
32393239
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
32413241
each element
32423242

32433243
.. code-block:: html+twig
32443244

32453245
{# templates/components/Invoice.html.twig #}
32463246
{% for lineItem in lineItems %}
3247-
<div id="{{ lineItem.id }}">
3247+
<div key="{{ lineItem.id }}">
32483248
{{ lineItem.name }}
32493249
</div>
32503250
{% endfor %}
@@ -3259,10 +3259,6 @@ the list changes as the user types into a search box... or by clicking
32593259
"delete" on an item. In this case, the wrong children may be removed
32603260
or existing child components may not disappear when they should.
32613261

3262-
.. versionadded:: 2.8
3263-
3264-
The ``key`` prop was added in Symfony UX Live Component 2.8.
3265-
32663262
To fix this, add a ``key`` prop to each child component that's unique
32673263
to that component:
32683264

@@ -3277,9 +3273,7 @@ to that component:
32773273
{% endfor %}
32783274
32793275
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.
32833277

32843278
.. _rendering-loop-new-element:
32853279

0 commit comments

Comments
 (0)