docs: address DX test feedback for Hilla 2.4

articles/react/components/auto-crud/index.asciidoc

@@ -40,7 +40,14 @@ include::{root}/src/main/java/com/vaadin/demo/fusion/crud/EmployeeRepository.jav
 
 Hilla generates TypeScript objects for each `@BrowserCallable` service implementing the `CrudService<T, ID>` interface. These TypeScript objects have callable methods that execute the corresponding Java service methods, enabling the Add, Update, and Delete operations as well as lazy data loading with sorting and filtering.
 
-For the `EmployeeService` example, you can import the generated TypeScript object in your React view, and use it as a value for the `service` property to render automatically grid columns and form fields. Here's what the rendered component looks like:
+For the example above, you can import the generated TypeScript objects in your React view and configure the component like so:
+
+[source,tsx]
+----
+<AutoCrud service={EmployeeService} model={EmployeeModel} />
+----
+
+Here's what the rendered component looks like:
 
 [.example.desktop]
 --

articles/react/components/auto-form/index.asciidoc

@@ -40,7 +40,12 @@ include::{root}/src/main/java/com/vaadin/demo/fusion/crud/EmployeeRepository.jav
 
 Hilla generates TypeScript objects for each `@BrowserCallable` service implementing the `CrudService<T, ID>` interface. These TypeScript objects have callable methods that execute the corresponding Java service methods, enabling the Add, Update, and Delete operations as well as lazy data loading with sorting and filtering.
 
-For the `EmployeeService` example, you can import the generated TypeScript object in your React view, and use it as a value for the `<AutoForm service={EmployeeService} />` property to render the form.
+For the example above, you can import the generated TypeScript objects in your React view and configure the component like so:
+
+[source,tsx]
+----
+<AutoForm service={EmployeeService} model={EmployeeModel} />
+----
 
 Here's what the rendered form looks like:
 
@@ -180,9 +185,9 @@ The following properties are available for managing the form state or reacting t
 
 - `item`: the item to be edited. If the item is `null`, the form is in _new_ mode, otherwise it is in _edit_ mode.
 - `disabled`: disables the whole form.
-- `afterSubmit`: a callback function that is called after the form is submitted successfully.
+- `onSubmitSuccess`: a callback function that is called after the form is submitted successfully.
 
-The following example shows how to use the `item` property to manage switching between _new_ and _edit_ modes, and `afterSubmit` for informing the user about the form submission success. In addition, it uses `disabled` property is also used to toggle the form's disabled state:
+The following example shows how to use the `item` property to manage switching between _new_ and _edit_ modes, and `onSubmitSuccess` for informing the user about the form submission success. In addition, it uses `disabled` property is also used to toggle the form's disabled state:
 
 [.example.desktop]
 --
@@ -195,9 +200,9 @@ include::{root}/frontend/demo/component/auto-form/react/auto-form-edit-new-modes
 Auto Form component supports Deletion functionality out-of-the-box, which is associated with calling the `delete` method from the `CrudService` introduced to the Auto Form. The following properties are associated with managing this functionality:
 
 - `deleteButtonVisible`: whether to show the delete button in the form which is hidden by default. If enabled, the delete button is only shown when editing an existing item, that means that `item` property is not null.
-- `afterDelete`: a callback function that is called after the item is deleted successfully.
+- `onDeleteSuccess`: a callback function that is called after the item is deleted successfully.
 
-The following example shows how to use the `deleteButtonVisible` property to show the Delete button, and uses the `afterDelete` property to inform the user about the deletion success. You can toggle between the _edit_ and _new_ modes to see its effect on the visibility of the Delete button in action:
+The following example shows how to use the `deleteButtonVisible` property to show the Delete button, and uses the `onDeleteSuccess` property to inform the user about the deletion success. You can toggle between the _edit_ and _new_ modes to see its effect on the visibility of the Delete button in action:
 
 [.example.desktop]
 --

articles/react/guides/routing.adoc

@@ -115,7 +115,7 @@ export default function ProductDetailView() {
   const { productId } = useParams();
 
   // Fetch product details for the given ID
-  const { product, setProduct } = useState<Product>();
+  const [ product, setProduct ] = useState<Product>();
 
   useEffect(() => {
     ProductEndpoint.getProduct(productId).then(setProduct);

frontend/demo/component/auto-crud/react/auto-crud-customized-form.tsx

@@ -17,9 +17,7 @@ function Example() {
         fieldOptions: {
           firstName: { label: 'Name' },
           description: {
-            renderer: ({ field }) => (
-              <TextArea key={field.name} {...field} label="Full description" />
-            ),
+            renderer: ({ field }) => <TextArea {...field} label="Full description" />,
           },
         },
       }}

frontend/demo/component/auto-form/react/auto-form-field-custom-renderer.tsx

@@ -14,9 +14,7 @@ function Example() {
       model={EmployeeModel}
       fieldOptions={{
         description: {
-          renderer: ({ field }) => (
-            <TextArea key={field.name} {...field} label="Full description" />
-          ),
+          renderer: ({ field }) => <TextArea {...field} label="Full description" />,
         },
       }}
     />