fixes

Author: weaverryan

src/LiveComponent/doc/index.rst

@@ -2639,7 +2639,7 @@ understand which element is which between re-renders (i.e. if something re-order
 or removes some of those elements), you can add a ``data-live-id`` attribute to
 each element
 
-.. code-block:: twig
+.. code-block:: html+twig
 
     {# templates/components/Invoice.html.twig #}
     {% for lineItem in lineItems %}
@@ -2665,9 +2665,9 @@ to that component:
 
 .. code-block:: twig
 
-    {# templates/components/Invoice.html.twig #}
-    {% for lineItem in lineItems %}
-        {{ component('InvoiceLineItem', {
+    {# templates/components/InvoiceCreator.html.twig #}
+    {% for lineItem in invoice.lineItems %}
+        {{ component('InvoiceLineItemForm', {
             lineItem: lineItem,
             key: lineItem.id,
         }) }}
@@ -2681,32 +2681,34 @@ a bit more convenient.
 Tricks with a Loop + a "New" Item
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-Let's get fancier. Suppose you're rendering all of the line items
-inside of an `InvoiceCreator` component. After the loop, you might
+Let's get fancier. After looping over the current line items, you
 decide to render one more component to create a *new* line item.
 In that case, you can pass in a ``key`` set to something like ``new_line_item``:
 
-.. code-block:: twig
+.. code-block:: html+twig
 
-    {{ component('InvoiceLineItem', {
+    {# templates/components/InvoiceCreator.html.twig #}
+    // ... loop and render the existing line item components
+
+    {{ component('InvoiceLineItemForm', {
         key: 'new_line_item',
     }) }}
 
-Imagine you also have a ``LiveAction`` inside of ``InvoiceLineItem``
+Imagine you also have a ``LiveAction`` inside of ``InvoiceLineItemForm``
 that saves the new line item to the database. To be extra fancy,
 it emits a ``lineItem:created`` event to the parent::
 
-    // src/Twig/InvoiceLineItem.php
+    // src/Twig/InvoiceLineItemForm.php
     // ...
 
     #[AsLiveComponent]
-    final class InvoiceLineItem
+    final class InvoiceLineItemForm
     {
         // ...
 
         #[LiveProp]
         #[Valid]
-        public InvoiceLineItem $lineItem;
+        public ?InvoiceLineItem $lineItem = null;
 
         #[PostMount]
         public function postMount(): void
@@ -2760,22 +2762,21 @@ component on the page is the *same* new component that it's about to render. And
 because the props passed into that component haven't changed, it doesn't see any
 reason to re-render it.
 
-To fix this, you haev two options:
+To fix this, you have two options:
 
 1. Make the ``key`` dynamic so it will be different after adding a new item::
 
 .. code-block:: twig
 
-    {{ component('InvoiceLineItem', {
-        key: 'new_line_item_' lineItems|length,
+    {{ component('InvoiceLineItemForm', {
+        key: 'new_line_item_'~lineItems|length,
     }) }}
 
-2. Reset the state of the ``InvoiceLineItem`` component after it's saved::
-
-    // src/Twig/InvoiceLineItem.php
+2. Reset the state of the ``InvoiceLineItemForm`` component after it's saved::
 
+    // src/Twig/InvoiceLineItemForm.php
     // ...
-    class InvoiceLineItem
+    class InvoiceLineItemForm
     {
         // ...