MusicList.js

import React from 'react';
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, onLike }) {
    let [snackState, setSnackState] = React.useState({ open: false, msg: '' })
    //const [likes, setLikes] = React.useState({});

    const toggleFavorite = (item) => () => {
        //React Hooks useState() with Object
        //https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object
        //setLikes({...likes, [id] : !likes[id]});
        //let temp = likes;
        //temp[id] = !temp[id]
        //setlikes(temp) => 좋아요 이미 눌려져 있는거 다시 누르면 좋아요 취소
        //setSnackState({...snackState, open : true, msg : `${id} is clicked` })
        onLike(item);
    }

    const handleSnackbarClose = (event, reason) => {
        if (reason === 'clickaway') {
            return;
        }
        setSnackState({ open: false, msg: '' });
        <SnackMsg open={snackState.open} message={snackState.msg}
            onClose={handleSnackbarClose} />
    }



    return (
        <div>
            {list && list.map(item => {
                return (
                    <Card sx={styles.card} key={item.collectionId}>
                        <CardContent>
                            <Typography variant="subtitle1"> {item.artistName} </Typography>
                            <Typography variant="subtitle2"> {item.collectionCensoredName}</Typography>
                        </CardContent>
                        <CardActions>
                            <IconButton onClick={toggleFavorite(item)}>
                                {item.like ? <Favorite /> : <FavoriteBorder />}
                            </IconButton>
                        </CardActions>
                    </Card>
                );
            })}
        </div>
    );
}