Change component name

doc/gui/extension/example_library/example_library.py

@@ -42,15 +42,15 @@ class ExampleLibrary(ElementLibrary):
                 # element, exported as GameTable in front-end/src/index.ts
                 # react_component="GameTable",
             ),
-            "item_list": Element(
+            "labeled_item_list": Element(
                 "lov",
                 {
                     "lov": ElementProperty(PropertyType.lov),
                     "sort": ElementProperty(PropertyType.string),
                 },
-                # The name of the React component (ItemList) that implements this custom
-                # element, exported as ItemList in front-end/src/index.ts
-                # react_component="ItemList",
+                # The name of the React component (LabeledItem) that implements this custom
+                # element, exported as LabeledItemList in front-end/src/index.ts
+                react_component="LabeledItem",
             )
         }
 

doc/gui/extension/example_library/front-end/src/ItemList.tsx → doc/gui/extension/example_library/front-end/src/LabeledItem.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { LoV, useLovListMemo } from "taipy-gui";
 
-interface ItemListProps {
+interface LabeledItemProps {
     lov?: LoV;
     defaultLov?: string;
     sort?: "asc" | "desc";
@@ -19,7 +19,7 @@ const styles = {
     },
 };
 
-const ItemList: React.FC<ItemListProps> = ({ lov, defaultLov = "", sort }) => {
+const LabeledItem: React.FC<LabeledItemProps> = ({ lov, defaultLov = "", sort }) => {
     const lovList = useLovListMemo(lov, defaultLov);
 
     const sortedLovList = useMemo(() => {
@@ -34,12 +34,12 @@ const ItemList: React.FC<ItemListProps> = ({ lov, defaultLov = "", sort }) => {
     return (
         <div>
             <ul>
-                {sortedLovList.map((todo, index) => (
+                {sortedLovList.map((item, index) => (
                     <li key={index} style={styles.listItem}>
-                        {typeof todo.item === "string" ? null : (
-                            <img src={todo.item.path} alt={todo.item.text} style={styles.image} />
+                        {typeof item.item === "string" ? null : (
+                            <img src={item.item.path} alt={item.item.text} style={styles.image} />
                         )}
-                        {todo.id}
+                        {item.id}
                     </li>
                 ))}
             </ul>
@@ -47,4 +47,4 @@ const ItemList: React.FC<ItemListProps> = ({ lov, defaultLov = "", sort }) => {
     );
 };
 
-export default ItemList;
+export default LabeledItem;

doc/gui/extension/example_library/front-end/src/index.ts

@@ -8,6 +8,6 @@
 // the name used in the element declaration in the element library.
 import ColoredLabel from "./ColoredLabel";
 import GameTable from "./GameTable";
-import ItemList from "./ItemList";
+import LabeledItem from "./LabeledItem";
 
-export { ColoredLabel as ExampleLabel, GameTable, ItemList };
+export { ColoredLabel as ExampleLabel, GameTable, LabeledItem };

doc/gui/extension/item_list.py → doc/gui/extension/labeled_item_list.py

@@ -21,8 +21,7 @@ languages = [
 ]
 
 page = """
-The list of programming languages is as follows:
-<|{languages}|example.item_list|sort=asc|>
+<|{languages}|example.labeled_item_list|sort=asc|>
 """
 
 if __name__ == "__main__":