MusicList.js

import React from 'react';
import {Card, CardContent,CardActions, Typography, IconButton} from '@mui/material';
import {Favorite, FavoriteBorder} from '@mui/icons-material';
import SnackMsg from './snackbar';

const styles = {
    content :{},
    layout : {
        display : 'flex',
        justifyContent : 'center'
    },
    card : {
        minWidth : 275,
        maxWidth : 600,
        marginBottom : "20pt",
        marginLeft : 'auto',
        marginRight : 'auto',
    },
};

export default function MusicList({list,likes,handleLike,myFavoriteList,addToFavoriteList}){
    let [snackState, setSnackState] = React.useState({open:false, msg:''})
    const toggleFavorite = (id,name) => () => {
        const updatedLikes = { ...likes, [id]: !likes[id] };
        setSnackState({ ...snackState, open: true, msg: `${name} is clicked` });
        handleLike(id);
        if (updatedLikes[id]) {
            if (!myFavoriteList.find((item) => item.collectionId === id)) {
                addToFavoriteList(list.find((item) => item.collectionId === id));
            }
        } else {
            const updatedFavoriteList = myFavoriteList.filter((item) => item.collectionId !== item);
            addToFavoriteList(updatedFavoriteList);
        }
    
    }
    const handleSnackbarClose = (event, reason) => {
        if (reason === 'clickaway') {
        return;
        }
        setSnackState({ open: false, msg: '' });
    };

    return (
        <div>
            {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.collectionId, item.collectionName)}>
                                {likes[item.collectionId] === true ? <Favorite /> : <FavoriteBorder />}
                            </IconButton>
                        </CardActions>
                    </Card>
                )
            })}
            <SnackMsg open = {snackState.open} message = {snackState.msg} onClose={handleSnackbarClose} />
        </div>

    )
}