right before excercise

src/App.js

 import React from 'react';
-import MusicList from './MusicList';
-import music_list from './data';
-import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
+import MusicList from './MusicList.js';
+import music_list from './data.js';
 import SearchPage from './SearchPage';
+import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
 
 export default function App () {
     const [currentTab, setCurrentTab] = React.useState(0);
-    const [searchResul, setSearchResult] = React.useState([]);
+    const [searchResult, setSearchResult] = React.useState([]);
     const handleTabChange = (event, newValue) => {
         setCurrentTab(newValue);
     }

src/Favorites.js

+/*
+1. 전역변수 사용하지 말것
+2. SearchPage에서 가수 2~3명의 음악을 검색하고, 좋아요를 클릭하고, 
+Favorites 페이지를 보았을 때, 여러 가수들의 노래들이 표시되어야 하고, 
+Favorites에서 좋아요를 다시 클릭하면, 그 음악이 사라져야 합니다.
+*/

src/MusicList.js

@@ -19,9 +19,9 @@ const styles = {
 export default function MusicList ({list}) {
     const [likes, setLikes] = React.useState({});
     let [snackState, setSnackState] = React.useState({open: false, msg:''})
-    const toggleFavorite = (id) => () => {
+    const toggleFavorite = (id, name) => () => {
         setLikes({...likes, [id]: !likes[id]});
-        setSnackState({...snackState, open: true, msg: `${id} is clicked`})
+        setSnackState({...snackState, open: true, msg: `${name} is clicked`})
     }
     const handleSnackbarClose = (event, reason)=> {
         if(reason === 'clickaway'){
@@ -33,13 +33,13 @@ export default function MusicList ({list}) {
         <div>
             {list.map(item => {
                 return (
-                    <Card sx={styles.card} key={(item.collectionId)}>
+                    <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.collectionName)}>
+                            <IconButton onClick = {toggleFavorite(item.collectionId, item.collectionCensoredName)}>
                                 {(likes[item.collectionId] === true) ? <Favorite/> : <FavoriteBorder/>}
                             </IconButton>
                         </CardActions>

src/SearchPage.js

 import React from 'react';
+import MusicList from './MusicList.js';
 import {Button, TextField} from '@mui/material';
-import MusicList from './MusicList';
 
 export default function SearchPage ({list, onSearch}) {
     const [searchWord, setSearchWord] = React.useState('');