feature use some material component

src/main/resources/public/src/ListData.js

@@ -2,12 +2,30 @@
 
 function ListData({datas}) {
     return (
-        <div>
+        <MaterialUI.List sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}>
-            {
+            {datas.map((data, index) =>
-                datas.map((data, index) =>
+                <div key={index}>
-                    <div key={index}>{data.name}</div>
+                    <MaterialUI.ListItem alignItems="flex-start">
-                )
+                        <MaterialUI.ListItemText
+                            primary={`Node ${data.name}`}
+                            secondary={
+                                <React.Fragment>
+                                    <MaterialUI.Typography
+                                        sx={{display: 'inline'}}
+                                        component="span"
+                                        variant="body2"
+                                        color="text.primary"
+                                    >
+                                        to Scott, Alex, Jennifer
+                                    </MaterialUI.Typography>
+                                    {" — Wish I could come, but I'm out of town this…"}
+                                </React.Fragment>
                             }
+                        />
+                    </MaterialUI.ListItem>
+                    {( index !== datas.length -1 ? <MaterialUI.Divider variant="inset" component="li"/> : '' )}
                 </div>
+            )}
+        </MaterialUI.List>
     )
 }

src/main/resources/public/src/NodesComponent.js

@@ -13,9 +13,9 @@ function Nodes({criteria}) {
     }, [criteria]);
 
     return (
-        <div>
+        <MaterialUI.Card variant="outlined">
             <div>nodes</div>
             <ListData datas={nodes}/>
-        </div>
+        </MaterialUI.Card>
     );
 }