using mui

src/components/RestaurantList.js

@@ -1,25 +1,31 @@
 import { useEffect } from "react";
 import { connect } from "react-redux";
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
 import { loadRestaurants } from '../store/restaurants/actions';
 
-export function RestaurantList({ loadRestaurants, restaurants }) {
+export function RestaurantList({ loadRestaurants, restaurants })
+{
     useEffect(() => 
-    { 
-        loadRestaurants(); 
+    {
+        loadRestaurants();
     }, [loadRestaurants]);
     return (
-        <ul>
-            {restaurants.map(restaurant => 
+        <List>
+            {restaurants.map(restaurant =>
             (
-                <li key={restaurant.id}>{restaurant.name}</li>
+                <ListItem key={restaurant.id}>
+                    <ListItemText>{restaurant.name}</ListItemText>
+                </ListItem>
             ))}
-        </ul>
+        </List>
     );
 };
 
 const mapStateToProps = state => ({
     restaurants: state.restaurants.records,
 });
-const mapDispatchToProps = {loadRestaurants};
+const mapDispatchToProps = { loadRestaurants };
 
 export default connect(mapStateToProps, mapDispatchToProps)(RestaurantList);