Toggle

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.13.7",
     "@mui/material": "^5.8.6"
   },
   "devDependencies": {

src/App.js

@@ -7,7 +7,7 @@ export default function App () {
     return (
         <React.Fragment>
             <AppBar positions = "fixed">
-                <Typography align = "center" variant = "h3" color = "inherit">Favorite Music</Typography>
+                <Typography align = "center" variant = "h3" color = "inherit">Hyunjin's Favorite Music</Typography>
             </AppBar>
 
             <div style = {{height: 60, width: '100%'}}></div>

src/MusicList.js

 import React from 'react';
-import {Card, CardContent, Typography} from '@mui/material';
+import {Card, CardContent, CardActions, Typography, IconButton} from '@mui/material';
+import {Favorite, FavoriteBorder} from '@mui/icons-material';
+
+const styles = {
+    content: {},
+    layout: {
+        display: 'flex',
+        justifyContent: 'center'
+    }, 
+    card: {
+        minWidth: 275, 
+        maxWidth: 600, 
+        marginBottom: '20pt', 
+        marginLeft: 'auto', 
+        marginRight: 'auto',
+    },
+};
+export default function MusicList ({list}) {
+    const [likes, setLikes] = React.useState({});
+
+    const toggleFavorite = (id) => () => {
+        setLikes({...likes, [id]: !likes[id]});
+    }
 
-export default function ({list}) {
     return (
         <div>
             {list.results.map(item => {
                 return (
-                    <Card>
+                    <Card sx={styles.card} key={(item.collectionId)}>
                         <CardContent>
                             <Typography varient = "subtitle1"> {item.artistName} </Typography>
                             <Typography variant = "subtitle2"> {item.colletcionCensoredName} </Typography>
                         </CardContent>
+                        <CardActions>
+                            <IconButton onClick = {toggleFavorite(item.collectionId)}>
+                                {(likes[item.collectionId] === true) ? <Favorite/> : <FavoriteBorder/>}
+                            </IconButton>
+                        </CardActions>
                     </Card>
                 )
             })}