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, likes, toggleFavorite}) {
    return (
        <div>
            {list.map(item => {
                return (
                    <Card sx={styles.card} key={item.collectionId}>
                        <CardContent>
                            <Typography varient = "subtitle1"> {item.artistName} </Typography>
                            <Typography variant = "subtitle2"> {item.collectionName} </Typography>
                        </CardContent>
                        <CardActions>
                            <IconButton onClick = {() => toggleFavorite(item.collectionId, item.collectionName)}>
                                {(likes[item.collectionId] === true) ? <Favorite/> : <FavoriteBorder/>}
                            </IconButton>
                        </CardActions>
                    </Card>
                )
            })}
        </div>
    );
}