Favorites.js

import React from 'react';
import { Typography } from '@mui/material';
import MusicList from './MusicList';

const Favorites = ({ list, likes }) => {
  const favoriteList = list.filter(item => likes[item.collectionCensoredName]);

  return (
    <React.Fragment>
      <Typography align="center" variant="h2">Favorites</Typography>
      {favoriteList.length > 0 ? (
        <MusicList list={favoriteList} />
      ) : (
        <Typography align="center" variant="h4">No favorites yet.</Typography>
      )}
    </React.Fragment>
  );
}

export default Favorites;